进入/离开 时过渡的类名,有 6 个 class 切换
1.v-enter
定义进入过渡的开始状态,在元素被插入时生效,在下一个帧移出
2.v-enter-active
定义过渡的状态,在元素整个过渡中作用
3.v-enter-to
定义进入过渡的结束状态,在元素被插入一帧后生效,此时删除 v-enter
4.v-leave
定义离开过渡的开始状态
5.v-leave-active
定义过渡的状态,在离开过渡被触发后立即生效
6.v-leave-to
定义离开过渡的结束状态,在离开过渡被触发一帧后失效,此时删除v-leave
1.html
<transition name="fade">
<p> hello </p>
</transition>
2.css
.fade-enter-active{
...................................
}
.fade-leave-active{
....................................
}
css 的类名为 <transition> 中的 “ name 属性 - 过渡类名 ”构成。