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)行講解。