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

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

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

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

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

先來看看我們要實(shí)現(xiàn)一個什么樣子的案例效果

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

被 包裹的組件，在組件的不同階段會產(chǎn)生不同的 class 類名進(jìn)行切換

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

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

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

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

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

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