Vue過渡，可以在元素從DOM中移除，插入時自動調用過渡效果。根據設定，會適時的觸發過渡效果。 在使用的目標標簽里添加 transition： <div transition="my_transition"></div> https://jsfiddle.net/miloer/n282tqwv/ 它 ...
Vue過渡，可以在元素從DOM中移除，插入時自動調用過渡效果。根據設定，會適時的觸發過渡效果。
在使用的目標標簽里添加 transition：
<div transition="my_transition"></div>
|
https://jsfiddle.net/miloer/n282tqwv/
它還可以和v-if,v-show,v-for，動態組件一起使用。
官方對Vue過渡過程的講解：
- 嘗試以 ID
"my-transition"查找 JavaScript 過渡鉤子對象——通過Vue.transition(id, hooks)或transitions選項註冊。如果找到了，將在過渡的不同階段調用相應的鉤子。 - 自動嗅探目標元素是否有 CSS 過渡或動畫，併在合適時添加/刪除 CSS 類名。
- 如果沒有找到 JavaScript 鉤子並且也沒有檢測到 CSS 過渡/動畫，DOM 操作（插入/刪除）在下一幀中立即執行。
還可以利用javascript鉤子來實現過渡，一開始我把鉤子寫在裡面了，它放在外面。
官方CSS塊代碼有個這樣的註釋：
/* .expand-enter 定義進入的開始狀態 */
/* .expand-leave 定義離開的結束狀態 */
這個就是動畫結束後的最終狀態，我覺得它只是一個局部狀態，最終還是受目標標簽里的代碼約束的。
https://jsfiddle.net/miloer/n282tqwv/1/
過渡的CSS名，
類名的添加和切換取決於 transition 特性的值。比如 transition="fade"，會有三個 CSS 類名：
.fade-transition始終保留在元素上。.fade-enter定義進入過渡的開始狀態。只應用一幀然後立即刪除。.fade-leave定義離開過渡的結束狀態。在離開過渡開始時生效，在它結束後刪除。
如果 transition 特性沒有值，類名預設是 .v-transition, .v-enter 和 .v-leave。
官方的流程詳解，我覺得挺好
當 show 屬性改變時，Vue.js 將相應地插入或刪除div元素，按照如下規則改變過渡的 CSS 類名：
如果 show 變為 false，Vue.js 將：
- 用 beforeLeave 鉤子；
- 添加 v-leave 類名到元素上以觸發過渡；
- 調用 leave 鉤子；
- 等待過渡結束（監聽 transitionend 事件）；
- 從 DOM 中刪除元素並刪除 v-leave 類名；
- 調用 afterLeave 鉤子。
如果 show 變為 true，Vue.js 將：
- 調用 beforeEnter 鉤子；
- 添加 v-enter 類名到元素上；
- 把它插入 DOM；
- 調用 enter 鉤子；
- 強制一次CSS 佈局，讓 v-enter 確實生效。然後刪除 v-enter 類名，以觸發過渡，回到元素的原始狀態；
- 等待過渡結束；
- 調用afterEnter鉤子。
在加一個官方的小例子，整理出來：https://jsfiddle.net/miloer/7zjq41mz/
