Vue學習筆記 - 關於過渡效果的一些總結

雖然經常用Vue做提供的transition做動畫效果，但是每次都要去官方文件看好幾遍才能寫，所以總結下加深理解：

過渡的類名

Vue提供了以下類名用於實現動畫：

• v-enter
• v-enter-active
• v-enter-to
• v-leave
• v-leave-active
• v-leave-to

之前我對這些類名新增在元素身上的時機，理解是有誤的導致寫動畫效果的時候，基本靠猜，下面說下我自己的理解:

一個完整的過渡效果流程：

1. 元素未插入之前：

   • 元素未插入之前在v-enter和v-enter-active這兩個類名就會新增到元素上。

2. 元素插入後的下一幀：

   • 元素插入後的下一幀，v-enter這個類名就會被移除同時v-enter-to會被新增到元素上，如果v-enter中寫了樣式，如果過渡的時間足夠長，你就會看到元素是以v-enter中定義的樣式開始過渡的，可以理解v-enter是用於定義元素過渡開始的初始樣式。

3. 元素過渡效果結束

   • 元素過渡效果結束，v-enter-active和v-enter-to被移除，因為v-enter-active一直從元素的過渡開始直到過渡結束才會被移除，所以v-enter-active中常常用來定義元素的過渡效果。v-enter-active 和 v-enter-to不同的是v-enter-to是元素被插入後的下一幀才被新增，v-enter-active在元素插入前就存在了。（我試著將過渡時間寫在v-enter-to中，效果看起來沒什麼區別）

   • 元素過渡效果結束之後，由於v-enter-to被移除了，所以元素會變為自身的樣式，這也是我老是理解錯的一點，我之前的理解是這樣：

     v-enter -> v-enter-active -> v-enter-to（這裡定義了元素過渡結束後的樣式）

     這個理解是錯的，其實是這樣：

     v-enter, v-enter-active -> v-enter-active, v-enter-to -> 元素本身的樣式

     如果定義了v-enter-to，v-enter-to中的樣式和元素本身的樣式不一樣，而且元素本身樣式中沒有過渡效果相關的css，在過渡結束後元素的樣式會突然從v-enter-to中的樣式變成元素本身的樣式，也可以將v-enter-to中的樣式寫的和元素本身一樣，那麼過渡結束後的變化就不會很突兀。一般的過渡都是從某個樣式過渡到元素本身的樣式，所以，v-enter-to一般是不寫的。

4. 元素被移除的過渡開始：

   • 元素被移除的過渡開始會新增v-leave，v-leave-active， v-leave-to類名，過渡開始的下一幀會v-leave被移除，按照我對v-enter的立即，v-leave應該也是元素移除過渡開始的初始樣式，但是可能移除過渡開始的速度太快了，我自己測試的時候並沒有看到定義在v-leave中的樣式生效。v-leave-active和v-leave-to都會在過渡效果完成之後移除。離開的過渡流程大概是這樣：

     v-leave, ，v-leave-active, v-leave-to -> v-leave-active, v-leave-to -> 元素被移除

綜合上面得出的結論：

1. v-enter, v-leave-to中的css一般相同，一個是進入時過渡（動畫）的初始樣式，一個是離開過渡（動畫）結束時的樣式。
2. v-enter-active ，v-leave-active 中的css一般相同，一般都是用於定義過渡（動畫）的過程時間，延遲和曲線函式。當然離開的過渡（動畫）的過程時間，延遲和曲線函式和進入的可以是不同的。
3. v-enter-to，v-leave一般不寫，不寫的原因是：按照一般的過渡效果（動畫），進入的最後狀態就是元素本身的樣式，離開的最初狀態也是元素本身的樣式，所以是沒有必要寫的。（v-leave我自己是沒有測試出效果。。。）