Vue of transition and animation

Vue of transition and animation

 

Entering & leaving the single elements of transition

    Vue in with the new, when you insert or remove DOM, offers a variety of transition effects,

        1. Automatic application in css transitions and animations in class,

        2. The animation can be used with third-party libraries, such as animate.css

        3. Use Javascript hook function in the transition operation directly DOM,

        4. can be used with third-party Javascript libraries, such as velocity.js

 

    Transition effect

         1. The single-element / transition assembly

             1.css transition

        / * Fade name value corresponding to the html element transition, the other is fixed. * / 
        .Fade-Active-Enter, Leave-Active-.fade { 
        Transition : Opacity .5s
         } 
        .fade-Enter, Leave-Active-.fade { 
        Opacity : 0
         }

< Div the above mentioned id = "Box" > 
        < the Button @click = "handleClick" > click to hide tag p </ the Button > 
        <-! Transition effects Transition -> 
        < Transition name = "Fade" > 
            < p v-Show = " isShow " > 111111111 </ P > 
        </ Transition > 
</ div >

    was vm = new Vue ({
        el: '#box' ,
        data:{
            isShow:true,
        },
        methods: {
            handleClick(){
                this.isShow = !this.isShow;
            },
        },
    })

             2.css animation

            3. Combination animate.css Animation Library

        2. Initial Render transition

            //appear   appear-active-class

        3. A plurality of transition elements (setting key)

            When there are a plurality of switching elements of the same tag name, to set a unique tag values ​​by key characteristics of each switching element

            mode:in-out;out-in

        4. The assembly of a plurality of transition

        The transition list (setting key)

            Different transition-group and transition, it will be a real element rendering, the default is a span, you can also change the attributes to other elements by tag

            Provide a unique key attribute

        6. Reusable transition