首頁技術文章正文

什么是Vue過渡和動畫？

更新時間:2021年09月09日16時11分來源:傳智教育瀏覽次數(shù):

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

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

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

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

好口碑IT培訓