Vue在插人、更新或者移除DOM時,提供了多種過渡效果。這里所說的過渡,簡而言之,就是從一個狀態(tài)向另外一個狀態(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)用到另一個過渡時就不會產(chǎn)生沖突。
通過標(biāo)簽搭配CSS動畫(如@keyframes)可以實現(xiàn)動畫效果。動畫相比過渡來說,可以在一個聲明中設(shè)置多個狀態(tài),例如,可以在動畫20%的位置設(shè)置一個 關(guān)鍵幀,然后在動畫50%的位置設(shè)置一個完全不同的狀態(tài)。另外, 標(biāo)簽還提供了一些鉤子函數(shù),可以結(jié)合JavaScript代碼來完成動畫效果,具體會在后面進(jìn)行講解。