進入/離開 時過渡的類名,有 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 屬性 - 過渡類名 ”構成。