什么是Vue過(guò)渡和動(dòng)畫(huà)？

Vue在插人、更新或者移除DOM時(shí)，提供了多種過(guò)渡效果。這里所說(shuō)的過(guò)渡，簡(jiǎn)而言之，就是從一個(gè)狀態(tài)向另外一個(gè)狀態(tài)插入值，新的狀態(tài)替換了舊的狀態(tài)。Vue提供了內(nèi)置的過(guò)渡封裝組件，即transition組件，語(yǔ)法格式如下。

<transition name="fade">
    <!-- 需要添加過(guò)度的div標(biāo)簽 -->
    <div></div>
</transition>

上述代碼中，標(biāo)簽中用來(lái)放置需要添加過(guò)渡的div元素，使用name屬性可以設(shè)置前綴，將name屬性設(shè)為fade,那么“fade- ”就是在過(guò)渡中切換的類(lèi)名前綴，如fade-enter、fade-leave等。如果 標(biāo)簽上沒(méi)有設(shè)置name屬性名，那么“v-” 就是這些類(lèi)名的默認(rèn)前綴，如v-enter、 v-leave 等。推薦設(shè)置name值進(jìn)行命名，這樣在應(yīng)用到另一個(gè)過(guò)渡時(shí)就不會(huì)產(chǎn)生沖突。

通過(guò)標(biāo)簽搭配CSS動(dòng)畫(huà)(如@keyframes)可以實(shí)現(xiàn)動(dòng)畫(huà)效果。動(dòng)畫(huà)相比過(guò)渡來(lái)說(shuō)，可以在一個(gè)聲明中設(shè)置多個(gè)狀態(tài)，例如，可以在動(dòng)畫(huà)20%的位置設(shè)置一個(gè) 關(guān)鍵幀，然后在動(dòng)畫(huà)50%的位置設(shè)置一個(gè)完全不同的狀態(tài)。另外， 標(biāo)簽還提供了一些鉤子函數(shù)，可以結(jié)合JavaScript代碼來(lái)完成動(dòng)畫(huà)效果，具體會(huì)在后面進(jìn)行講解。