After entering before leaving
v-enter---v-enter-to v-leave-to---v-leave 时间点
v-enter-active v-leave -active period
One,
<Transition name = "My" > // modify the prefix
.v-enter-active{
transiton:all .8s ease
}
.my-enter{
transform:translateX(80px);
opacity:0;
}
two,
Third party animate.css
<link>
Admission bounceIn
Leave bounceOut
<transition enter-active-class="animated bounceIn"> //一定要写animated
: Duration = "{enter: 500, leave: 0}" // ms duration
three,
Half Animation
<transition @before-enter="beforeEnter">
methods:{
beforeEnter(el){
},
enter(el,done)
offsetHeight//触发刷新
...
done
}
四，
v-for :key
<transition-group>