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

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

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

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

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