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

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

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

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

實(shí)例1：

當(dāng)show = true時(shí):

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

當(dāng)show = false時(shí):

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

實(shí)例2：

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

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

總結(jié)

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

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