进入之前 离开之后
v-enter---v-enter-to v-leave-to---v-leave 时间点
v-enter-active v-leave-active 时间段
一,
<transition name="my"> //修改前缀名
.v-enter-active{
transiton:all .8s ease
}
.my-enter{
transform:translateX(80px);
opacity:0;
}
二,
第三方animate.css
<link>
入场bounceIn
离场bounceOut
<transition enter-active-class="animated bounceIn"> //一定要写animated
:duration="{enter :500,leave:0}"//持续时间 毫秒
三,
半场动画
<transition @before-enter="beforeEnter">
methods:{
beforeEnter(el){
},
enter(el,done)
offsetHeight//触发刷新
...
done
}
四,
v-for :key
<transition-group>