1. 程式人生 > >Vue的過渡或動畫

Vue的過渡或動畫

一、過渡的類名

在進入/離開的過渡中,共有6種class進行切換,分別是v-enter,v-enter-active,v-enter-to,v-leave,v-leave-active,v-leave-to.

  • v-enter:指的是進入過渡的開始狀態。在元素被插入之前生效,在元素插入後的下一幀移除。進入v-enter-active。
  • v-enter-active: 指的是進入過渡生效時的狀態,意思是開始進行過渡。在整個過渡的階段中應用,在元素被插入之前生效(這樣才能在元素插入時應用在元素上),在過渡/動畫完成時移除,這時候代表過渡階段已經完成,下面進入v-enter-to。
  • v-enter-to:定義進入過渡的結束狀態。在元素被插入之後下一幀生效 (與此同時 v-enter 被移除),在過渡/動畫完成之後移除。
  • v-leave: 定義離開過渡的開始狀態。在離開過渡被觸發時立刻生效,下一幀被移除。
  • v-leave-active:定義離開過渡生效時的狀態。在整個離開過渡的階段中應用,在離開過渡被觸發時立刻生效,在過渡/動畫完成之後移除。這個類可以被用來定義離開過渡的過程時間,延遲和曲線函式。
  • v-leave-to: 2.1.8版及以上 定義離開過渡的結束狀態。在離開過渡被觸發之後下一幀生效 (與此同時 v-leave 被刪除),在過渡/動畫完成之後移除。

    這個圖很直觀。