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

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

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

上面只是開(kāi)個(gè)玩笑，下面咱們進(jìn)入主題，看看 Vue 中如何更好更簡(jiǎn)單的添加動(dòng)畫(huà)。

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

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

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

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

v-enter/v-leave：動(dòng)畫(huà)的第一幀

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

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

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

v- 是 Vue 中默認(rèn)的類(lèi)名前綴，我們?cè)谑褂玫倪^(guò)程中如果一直使用默認(rèn)的命名方式的話(huà)，必然會(huì)導(dǎo)致一些沖突，所以 Vue 給我們提供了一個(gè)自定義命名的方案，我們只需要給 添加一個(gè) name 屬性即可。

既然我們知道了方法，我們就來(lái)給它加一個(gè)簡(jiǎn)單的動(dòng)畫(huà)。