locked
WinJS.FlipView custom animations (set using setCustomAnimations) not working on touch.

    Question

  • The setCustomAnimations method of WinJS.FlipView is not working for touch event, though it is working for mouse event. 

    When I debug the code, the breakpoint are not being hit when running the app in simulator and using touch. But the breakpoints are hitting when working with mouse. 

    Is is that the custom animation of flipview will not be work on touch. I could not find it mentioned in the documentation of flipview. 

    The code is: 

    function animationPrevious(outgoing, incoming) {
            var promise1 = WinJS.UI.Animation.fadeOut(outgoing);
            var promise2 = WinJS.UI.Animation.fadeIn(incoming);
            return WinJS.Promise.join([promise1, promise2]);
        }

     function animationNext(outgoing, incoming) {
            var promise1 = WinJS.UI.Animation.fadeOut(outgoing);
            var promise2 = WinJS.UI.Animation.fadeIn(incoming);
            return WinJS.Promise.join([promise1, promise2]);
    }

     var page = WinJS.UI.Pages.define("/html/simpleflipview.html", {
            processed: function (element, options) {
                // WinJS.UI.processAll() is automatically called by the Pages infrastructure by the time this
                // function gets called, and it has processed the div with data-win-control="WinJS.UI.FlipView"
                flipview = document.getElementById("simple_FlipView").winControl;
                var animations = new Object();
                animations.next = animationNext;
                animations.previous = animationPrevious;
                animations.jump = undefined;
                flipview.setCustomAnimations(animations);

          }
     }


    Wednesday, September 26, 2012 12:31 PM

All replies

  • Hi Avi,

    When you say "will not work on touch" what does that mean?  Does it hit your breakpoint in the debugger? How are you testing it (in the simulator)?  If using the simulator does mouse in the simulator also "not work"?

    -Jeff


    Jeff Sanders (MSFT)

    Thursday, September 27, 2012 2:45 PM
    Moderator
  • Hi Avugupta50,

    flipview.setCustomAnimations will only apply to mouse/keyboard or programmatically triggered navigations. When you use touch in the WinJS FlipView, the animations are handled by the system (same animations you get when panning div with mandatory scroll snap points - http://msdn.microsoft.com/en-us/library/windows/apps/hh466031.aspx).

    We will update the flipview.setCustomAnimations documentation to state this.

    Thanks.

    Thursday, September 27, 2012 7:56 PM