Vue transition animation

Vue can provide transition effects when elements or components enter and disappear

• Use transition:

 
 Toggle
 
 
 
hello

 



new Vue({
 el:'#demo',
 data: {
 show: true
 }
})



. fade-enter-active, .fade-leave-active {
 transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave- active below version 2.1.8 */ {
 opacity: 0;
}

Vue will automatically sniff the target element whether CSS transition or animation (transition tag wrap) is applied to it, if Yes, add/remove CSS class names at the right time.
During the transition of entry/exit, there will be 6 class switching:
v-enter: before inserting elements
v-enter-active: entire Entering the transition phase
v-enter-to: entering the end of the transition
v-leave: starting to leave
v-leave-active: the entire leaving transition phase
v-leave-to: leaving the transition End

For these class names that switch in transition, if you Use a without a name, then v- is the default prefix for these class names. If you use , then v-enter will be replaced with my-transition-enter.