vue動畫理解，進入、離開、列表過分和路由切換。

vue的動畫對於不少初學者，甚至對不少老鳥來講也是很費勁，不容易控制的。
這篇文章講vue動畫的理解。其實沒那麼難。

動畫理解

一個元素從A狀態變成B狀態，若是這個過程經過某種方式反應在視圖上了，那麼這個元素完成了一個動畫。若是有不少狀態A->B->C->D...，那麼它完成了一系列動畫。

重點：狀態A、狀態B和某種方式

vue控制三者的核心

6個class：

1. v-enter enter翻譯過來是「進入」，這裏的進入是指的進入時的狀態(此時看不見元素)
2. v-leave-to leave-to翻譯過來是「離開到」，這裏指的是離開完成以後的狀態(此時看不見元素)
3. v-leave leave翻譯爲「離開」，這裏指離開時的狀態(此時看得見元素)
4. v-enter-to enter-to翻譯爲「進入到」，這裏指的是進入完成以後的狀態(此時看得見元素)

咱們討論的是進入、離開和列表過分時的動畫，主要是在使用諸如v-if v-show 路由切換技術上，一個元素從有到無，從無到有，其實就只有兩種狀態（A、B），有和無。上訴的4個class就是用來指定這兩種狀態的：

a. v-enter和v-leave-to指定無時的狀態（請結合英語或翻譯理解）；b. v-leave和v-enter-to指定有時的狀態（請結合英語或翻譯理解）

此時，咱們定義了有和無兩種狀態，若是咱們的再指定某種方式，就能夠把從無到有，從有到無的過程反應在視圖上，造成咱們看到的過分或者動畫。

1. v-enter-active 指定從無到有的變換方式

2. v-leave-active 指定從有到無的變換方式

因此，這兩種屬性裏面指定的規則通常是transition和animation兩種，分別對於簡單的過分（線性）和複雜的動畫（線性和非線性）

如今再看這個圖片是否是很好理解了