locked
Disable FlipView Default animations.

    Question

  • Hi,

    I have a flipview with image and text.

    I have written Css3 animation for the image.

    But as flipview got its default animation set out, first flip view animi is getting fired followed by the animation I have written.

    is it possible to disable the flip view default animation.

    If not then the alternative is to write out a custom animation and set it to custom animations of flip view

    This is how my css3 animation class look like.

    .flipviewimagebanner {
        animation: openwelcome 3s;
    }
    
    
    @keyframes openwelcome {
        from {
            width: 0px;
        }
    
        to {
            width: 750px;
        }
    }


    Thanks & Regards Tejaswi Chandrapatla

    Tuesday, November 26, 2013 1:02 PM

Answers

  • 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.


    Tuesday, November 26, 2013 4:57 PM