transition定義：過渡，提供了一種在更改CSS屬性時控制動畫速度的方法。 其可以讓屬性變化成為一個持續一段時間的過程，而不是立即生效的。

從定義可知，過渡是讓css屬性變化持續一段時間,首先我們得抓住重點，要想有過渡，必須要有屬性值發生變化，比如背景顏色從白色到黑色，某個元素的寬度由200到400 等等（文字內容變化不屬于此列）。元素插入頁面不會產生過渡，元素的display屬性值變化也不會產生過渡效果，那么vue是如何實現元素插入或者顯隱實現過渡效果的呢？

vue提供了transition組件，可以給v-if，v-show，動態組件和跟組件添加過渡效果。

當插入或刪除包含在?transition?組件中的元素時，Vue 將會做以下處理：

自動嗅探目標元素是否應用了 CSS 過渡或動畫，如果是，在恰當的時機添加/刪除 CSS 類名。

如果過渡提供了js鉤子函數，這些鉤子函數將在恰當的時機被調用

如果沒有找到 JavaScript 鉤子并且也沒有檢測到 CSS 過渡/動畫，DOM 操作 (插入/刪除) 在下一幀中立即執行。

通過插入/刪除過渡類名實現過渡，vue提供了6中過渡類名，實際上是5種，v-leave在2.0以后被移除

v-enter：定義進入過渡的開始狀態。在元素被插入之前生效，在元素被插入之后的下一幀移除。

v-enter-active：定義進入過渡生效時的狀態。在整個進入過渡的階段中應用，在元素被插入之前生效，在過渡/動畫完成之后移除。這個類可以被用來定義進入過渡的過程時間，延遲和曲線函數。

v-enter-leave：2.18及以上版本定義進入過渡的結束狀態。在元素被插入之后下一幀生效 (與此同時?v-enter?被移除)，在過渡/動畫完成之后移除。

v-leave-to：定義離開過渡的結束狀態。在離開過渡被觸發之后下一幀生效，在過渡/動畫完成之后移除。

v-leave-active：定義離開過渡生效時的狀態。在整個離開過渡的階段中應用，在離開過渡被觸發時立刻生效，在過渡/動畫完成之后移除。這個類可以被用來定義離開過渡的過程時間，延遲和曲線函數。

開始我們就說過，產生過渡，①屬性發生變化，②定義了transition過渡方式。而且插入或者display屬性變化是不會產生過渡效果得，那么vue是如何做到得，首先，我們看v-enter類，定義了過渡開始得狀態，也就是元素被插入頁面之前，在這我們可以屬性，即過渡元素得初始狀態，例如opacity:0，當元素被插入后，這個類被移除，這是關鍵，當移除v-enter后，此元素得opacity的值由0變為其初始設置的值，所以就有了過渡的條件之一，而v-enter-active類出現在整個進入過渡周期中，在這個類里我們定義元素如可控制過渡動畫，也就是transition屬性，有時候，行內元素無法實現動畫，我們也可以在這個類中該便其display屬性，使其在過渡期間以行內塊或者塊級元素展示。

v-enter-to：定義了進入過渡結束的狀態，比如，我們在這個類里設置opacity:0.8,則過渡效果為元素的透明度由0=>0.8;過渡結束后再變為1。

v-leave-to：離開過渡被處罰的下一幀被觸發，也就是在移除元素的前一刻，加入此類，改變其屬性值

v-leave-active：定了了離開過渡的動畫方式

?

總結

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

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