在進入/離開的過渡中,會有 6 個 class 切換。
1)v-enter:定義進入過渡的開始狀態。在元素被插入時生效,在下一個幀移除。
2)v-enter-active:定義過渡的狀態。在元素整個過渡過程中作用,在元素被插入時生效,在 transition/animation 完成之后移除。這個類可以被用來定義過渡的過程時間,延遲和曲線函數。
3)v-enter-to: 2.1.8版及以上 定義進入過渡的結束狀態。在元素被插入一幀后生效 (與此同時 v-enter 被刪除),在 transition/animation 完成之后移除。
4)v-leave: 定義離開過渡的開始狀態。在離開過渡被觸發時生效,在下一個幀移除。
5)v-leave-active:定義過渡的狀態。在元素整個過渡過程中作用,在離開過渡被觸發后立即生效,在 transition/animation 完成之后移除。這個類可以被用來定義過渡的過程時間,延遲和曲線函數。
6)v-leave-to: 2.1.8版及以上 定義離開過渡的結束狀態。在離開過渡被觸發一幀后生效 (與此同時 v-leave 被刪除),在 transition/animation 完成之后移除。
過渡的類名
對于這些在 enter/leave 過渡中切換的類名,v- 是這些類名的前綴。使用 <transition name="my-transition"> 可以重置前綴,比如 v-enter 替換為 my-transition-enter。
v-enter-active 和 v-leave-active 可以控制 進入/離開 過渡的不同階段,在下面章節會有個示例說明。