Vue 在插入、更新或者移除 DOM 時，提供多種不同方式的應用過渡效果。
包括以下工具：
- 在 CSS 過渡和動畫中自動應用 class
- 可以配合使用第三方 CSS 動畫庫，如 Animate.css
- 在過渡鉤子函數中使用 JavaScript 直接操作 DOM
- 可以配合使用第三方 JavaScript 動畫庫，如 Velocity.js
單元素/組件的過渡
Vue 提供了 transition 的封裝組件，在下列情形中，可以給任何元素和組件添加進入/離開過渡
- 條件渲染 (使用 v-if)
- 條件展示 (使用 v-show)
- 動態組件
- 組件根節點
舉個例子：
當插入或刪除包含在 transition 組件中的元素時，Vue 將會做以下處理：
- 自動嗅探目標元素是否應用了 CSS 過渡或動畫，如果是，在恰當的時機添加/刪除 CSS 類名。
- 如果過渡組件提供了 JavaScript 鉤子函數，這些鉤子函數將在恰當的時機被調用。
- 如果沒有找到 JavaScript 鉤子並且也沒有檢測到 CSS 過渡/動畫，DOM 操作 (插入/刪除) 在下一幀中立即執行。(注意：此指瀏覽器逐幀動畫機制，和 Vue 的 nextTick 概念不同)
過渡的類名
在進入/離開的過渡中，會有 6 個 class 切換。
- v-enter：定義進入過渡的開始狀態。在元素被插入之前生效，在元素被插入之後的下一幀移除。
- v-enter-active：定義進入過渡生效時的狀態。在整個進入過渡的階段中應用，在元素被插入之前生效，在過渡/動畫完成之後移除。這個類可以被用來定義進入過渡的過程時間，延遲和曲線函數。
- v-enter-to: 2.1.8版及以上 定義進入過渡的結束狀態。在元素被插入之後下一幀生效 (與此同時 v-enter 被移除)，在過渡/動畫完成之後移除。
- v-leave: 定義離開過渡的開始狀態。在離開過渡被觸發時立刻生效，下一幀被移除。
- v-leave-active：定義離開過渡生效時的狀態。在整個離開過渡的階段中應用，在離開過渡被觸發時立刻生效，在過渡/動畫完成之後移除。這個類可以被用來定義離開過渡的過程時間，延遲和曲線函數。
- v-leave-to: 2.1.8版及以上 定義離開過渡的結束狀態。在離開過渡被觸發之後下一幀生效 (與此同時 v-leave 被刪除)，在過渡/動畫完成之後移除。
對於這些在過渡中切換的類名來說，如果你使用一個沒有名字的
v-enter-active 和 v-leave-active 可以控制進入/離開過渡的不同的緩和曲線。
CSS動畫
上面的例子使用的CSS過濾，下面我們來看一種CSS動畫的實現方式。
自定義過渡類名
我們可以通過以下特性來自定義過渡類名：
- enter-class
- enter-active-class
- enter-to-class (2.1.8+)
- leave-class
- leave-active-class
- leave-to-class (2.1.8+)
他們的優先級高於普通的類名，這對於 Vue 的過渡系統和其他第三方 CSS 動畫庫，如 Animate.css 結合使用十分有用。
同時使用過渡和動畫
Vue 為了知道過渡的完成，必須設置相應的事件監聽器。它可以是 transitionend 或 animationend ，這取決於給元素應用的 CSS 規則。如果你使用其中任何一種，Vue 能自動識別類型並設置監聽。
JavaScript 鉤子
這些鉤子函數可以結合 CSS transitions/animations 使用，也可以單獨使用。
當只用 JavaScript 過渡的時候， 在 enter 和 leave 中，回調函數 done 是必須的 。否則，它們會被同步調用，過渡會立即完成。
推薦對於僅使用 JavaScript 過渡的元素添加 v-bind:css=”false”，Vue 會跳過 CSS 的檢測。這也可以避免過渡過程中 CSS 的影響。
一個使用 Velocity.js 的簡單例子：
閱讀更多 看到他請叫他快去學習 的文章
關鍵字: 移除 編程語言 JavaScript
