摘要：既然我們知道了方法，我們就來給它加一個簡單的動畫。動畫中還給我們提供了一些鉤子函數，我們可以使用鉤子函數構建動畫。它會告知我們的動畫完成，我們綁定了為，告訴組件跳過的檢測，使用。

項目開發中動畫有著很重要的作用，而且也是用到的地方非常多，例如：鼠標的進入離開，彈窗效果，組件的顯示隱藏，列表的切換等等，可以說我們網頁上的動畫無處不在，也有人說了，這些東西也可以不使用動畫。

對，你說的沒錯可以不使用，但是，首先你要說服你的產品經理咱能不能簡單點，不搞這么多虛的來點實際的，說完之后我估計你們倆得立馬干起來，其次，在你的網頁上不使用動畫不夠逼格啊，而且咱們的網頁也不夠生動，沒有活力，由此可見動畫的不可或缺性。

上面只是開個玩笑，下面咱們進入主題，看看 Vue 中如何更好更簡單的添加動畫。

首先，Vue 在插入，修改或者移除 DOM 時，提供了多種不同的添加動畫的方法，在 Vue 中我們使用 和 組件時，Vue 會給我們提供一些內置的 CSS 類與 JS 鉤子函數。

先來看看我們要實現一個什么樣子的案例效果

圖中的例子是一個非常常見的圖片切換效果，不過在這個例子中我們只是單純的實現圖片的切換，看起來非常的生硬，沒有任何的過渡效果，下面我們來給圖片加一點動畫的效果，讓它看起來非常的有逼格。

被 包裹的組件，在組件的不同階段會產生不同的 class 類名進行切換

v-enter/v-leave：動畫的第一幀

v-enter-acive/v-leave-active：動畫運行的階段，一些過渡屬性會放置在這里，如：時間，延遲等

v-enter-to/v-leave-to：動畫結束，最后一幀

官網上的一張圖片非常友好的展示了這個切換的過程。

v- 是 Vue 中默認的類名前綴，我們在使用的過程中如果一直使用默認的命名方式的話，必然會導致一些沖突，所以 Vue 給我們提供了一個自定義命名的方案，我們只需要給 添加一個 name 屬性即可。

既然我們知道了方法，我們就來給它加一個簡單的動畫。