You want to use the FlipView's
setCustomAnimations method to control this. You pass in an object with three member methods called next, previous, and jump. Each method receives the outgoing and incoming elements, so you can control them however you want. Each method then returns a WinJS.Promise
that completes when the animation is finished.
The easiest way to do all of this is to use animations from the
WinJS Animations library, which return promises, and if none of those fit exactly what you want, define your custom effect with
WinJS.UI.executeTransition or
executeAnimation rather than wiring it all up in CSS and JS directly. Chapter 11 of my
first edition ebook (free) goes into the details for these (the second edition preview doesn't have that chapter yet, but there's not much that changed for Windows 8.1). All of the animation APIs here return a promise,
which means that the methods you pass to the FlipView's setCustomAnimations will just call the appropriate API and return whatever promise they return.
If for some reason you must still define things in CSS directly, you'll then be creating a new WinJS.Promise directly, in which you'll encapsulate event handlers for the HTML animationend event at which point you'll complete the promise. For the details
of creating promises from scratch, refer to Appendix A of my
second edition preview book. But you should be able to do what you need with the WinJS animation helpers.
Kraig
Author,
Programming Windows Store Apps with HTML, CSS, and JavaScript, Second Edition,
a free ebook from Microsoft Press.
First edition (for Windows 8) also available.
