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

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

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

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

實例1：

當show = true時:

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

當show = false時:

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

實例2：

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。