vue--about CSS transitions and animations

1. Transition of single element/component

Vue provides transition a package component that can add entry/exit transitions to any element and component in the following scenarios

• Conditional rendering (using v-if )
• Condition display (use v-show )
• Dynamic components
• Component root Node

Instance:

<style>    . Fade-enter,. fade-leave-to { opacity:  0;     }    . fade-enter-active,. fade-leave-active { transition:  opacity. 5s;     }</style>

<!--fade is a custom name that will be prefixed with the class "Fade-enter"-  
<  Div id= "app" >    <transition name= "Fade" >                               <div v-if= "Show" >

<script>NewVue ({el:'#app', data:{Show:true}, methods:{HandleChange:function(){                 This. Show= ! This. Show; }        }    })</script>

2. The class name of the transition

In the transition to/from, there will be 6 class switches: V-enter, v-enter-active, V-enter-to, V-leave, V-leave-active, v-leave-to

About the Transition class name:

If you use a name that is not named <transition> , it v- is the default prefix for these class names.

If you use it <transition name="my-transition"> , it v-enter will be replaced bymy-transition-enter

3. About animations (omitted here)

4. Use of third-party animate.css libraries in Vue

first link introduces Animate.css, then combines the class name of the custom transition Enter-active-class, Leave-active-class,

　　Animated is a must-write, hinge shake is an animated effect introduced

<div id= "App" >    <transition enter-active-class= "animated hinge" Leave-active-class= " Animated Shake">        <div v-if=" show ">show</div>    </transition>    <button @ click= "HandleChange" >change</button></div>

<Script>    NewVue ({el:'#app', data:{Show:true}, methods:{HandleChange:function(){                 This. Show= ! This. Show; }        }    })</Script>

vue--about CSS transitions and animations