1.了解六个类名
.v-enter 进入开始类名
.v-enter-to 进入结束类名
.v-enter-active
.v-leave 离开开始类名
.v-leave-to 离开结束类名
.v-leave-active
v 就是transition 上的 name 属性
enter 表示从无到有
leave 表示从有到无
v-enter/leave 表示开始时样式
v-enter/leave-to 表示结束时样式
v-enter/leave-active 表示整个过程 一般把transition属性添加到这个类名里
2.多个元素
多个元素一起过渡时，enter和leave同时进行
我们可以通过设置模式mode让enter先或让leave先
mode="in-out" //先进后出
mode="out-in" //先出后进
<transition name="fade" mode="out-in">
<span v-if="show" key="1">内容</span>
<span v-else key="2">新的内容</span>
</transition>
网友评论