Vue封装的过度动画与动画
1、作用:在插入、更新或移除DOM时,在合适的时候给元素添加样式类名。
2、Enter
v-enter 进入的起点
v-enter-to 进入的终点
v-enter-active 进入的过程
v-leave 离开的起点
v-leave-to 离开的终点
v-leave-active 离开的过程
3、写法:
1、准备好样式:
a> 元素进入的样式:
1、v-enter 进入的起点
v-enter-to 进入的终点
v-enter-active 进入的过程
b> 元素离开的样式:
1、v-leave 离开的起点
v-leave-to 离开的终点
v-leave-active 离开的过程
2、使用<transition>包裹要过度的元素,并配置name属性:
<transition name="hello">
<h1 v-show="isShow">你好啊!</h1>
</transition>
3、备注: 若有多个元素需要过度,则需要使用<transition-group></transition-group>且每个元素都要书用key值。