v-enter: 定義過渡開始時元素的狀態。在元素被插入時生效，在下一個幀(下一幀也就是v-enter-active)移除(實際就是過渡將要開始之前，元素的狀態)

v-enter-active: 定義”進入過渡”的結束狀態。在元素被插入時生效，在 transition/animation 完成之后移除(實際就是過渡的中間狀態，比如淡入淡出里的淡入后的狀態)

v-leave: 定義”離開過渡”的開始狀態。在離開過渡被觸發時生效，在下一個幀移除(實際就是淡出狀態將要發生之前元素的狀態)

v-leave-active: 定義”離開過渡”完成后的結束狀態。在離開過渡被觸發時生效，在 transition/animation 完成之后移除(實際就是淡出完成后元素的最終狀態)

實例1：

當show = true時:

這里的’fold-enter’是在元素顯示的一瞬間被加入，在上面的例子中，example這個塊狀元素本來因為有了transform: translate3d(0, -100px, 0)這個樣式，所以被上移100px，但是因為fold-enter，所以將example這個塊狀元素又移到了原位，也就是將’translate3d(0,0,0)’作為過渡的開始狀態，但是隨著過渡狀態下一幀的開始，fold-enter瞬間就被移除掉，所以這時候的元素的樣式就會開始按照’fold-enter-active’所規定的樣式進行過渡，在0.5s內過渡到’transform: translate3d(0, -100px, 0)’，也就是之前提到的淡入淡出狀體的中間狀態，在過渡動畫結束之后，fold-enter-active這個類馬上被移除

當show = false時:

example不會馬上消失，從官方的圖中可以發現’fold-leave’的狀態就是’fold-enter-active’的結束時的狀態，然后fold-leave-active這個類就開始起作用了，example這時的位置是在-100px，fold-leave-active定義的是過渡的結束狀態：transform: translate3d(0, 0, 0);，但是同時又設置了transition: all .5s，所以這時元素會在0.5s的時間內下移100px之后再將fold-leave-active移除

實例2：

剛開始的時候按鈕透明度為0+偏移24px，然后過渡到透明度為1且不偏移的位置，再附加上內層小球滾動的特效即可

注意：動畫的CSS樣式是添加在要附加動畫效果的元素的class類上

總結

以上是生活随笔為你收集整理的Vue之过渡动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。