Vue 在插入、更新或者移除 DOM 時,提供多種不同方式的應(yīng)用過渡效果。包括以下工具:
? ? ? ?1. 在 CSS 過渡和動畫中自動應(yīng)用 class
? ? ? ?2.可以配合使用第三方 CSS 動畫庫,如 Animate.css
? ? ?3. ?在過渡鉤子函數(shù)中使用 JavaScript 直接操作 DOM
? ? ? 4. 可以配合使用第三方 JavaScript 動畫庫,如 Velocity.js
會有 6 個(CSS)類名在 enter/leave 的過渡中切換
v-enter: 定義進(jìn)入過渡的開始狀態(tài)。在元素被插入時生效,在下一個幀移除。
v-enter-active: 定義過渡的狀態(tài)。在元素整個過渡過程中作用,在元素被插入時生效,在transition/animation完成之后移除。 這個類可以被用來定義過渡的過程時間,延遲和曲線函數(shù)。
v-enter-to:2.1.8版及以上定義進(jìn)入過渡的結(jié)束狀態(tài)。在元素被插入一幀后生效(于此同時v-enter被刪除),在transition/animation完成之后移除。
v-leave: 定義離開過渡的開始狀態(tài)。在離開過渡被觸發(fā)時生效,在下一個幀移除。
v-leave-active: 定義過渡的狀態(tài)。在元素整個過渡過程中作用,在離開過渡被觸發(fā)后立即生效,在transition/animation完成之后移除。 這個類可以被用來定義過渡的過程時間,延遲和曲線函數(shù)。
v-leave-to:2.1.8版及以上定義離開過渡的結(jié)束狀態(tài)。在離開過渡被觸發(fā)一幀后生效(于此同時v-leave被刪除),在transition/animation完成之后移除。
對于在enter/leave過渡中切換的類名,v-是這些類名的前綴。使用可以重置前綴,比如v-enter替換為my-transition-enter。
v-enter-active和v-leave-active可以控制 進(jìn)入/離開 過渡的不同階段
CSS 動畫用法同 CSS 過渡,區(qū)別是在動畫中v-enter類名在節(jié)點插入 DOM 后不會立即刪除,而是在animationend事件觸發(fā)時刪除。
enter-class
enter-active-class
enter-to-class(>= 2.1.8 only)
leave-class
leave-active-class
leave-to-class(>= 2.1.8 only)
他們的優(yōu)先級高于普通的類名,這對于 Vue 的過渡系統(tǒng)和其他第三方 CSS 動畫庫,如Animate.css結(jié)合使用十分有用。
Vue 為了知道過渡的完成,必須設(shè)置相應(yīng)的事件監(jiān)聽器。它可以是transitionend或animationend,這取決于給元素應(yīng)用的 CSS 規(guī)則。如果你使用其中任何一種,Vue 能自動識別類型并設(shè)置監(jiān)聽。
但是,在一些場景中,你需要給同一個元素同時設(shè)置兩種過渡動效,比如animation很快的被觸發(fā)并完成了,而transition效果還沒結(jié)束。在這種情況中,你就需要使用type特性并設(shè)置animation或transition來明確聲明你需要 Vue 監(jiān)聽的類型。
transition組件上的duration屬性定制一個顯性的過渡效果持續(xù)時間 (以毫秒計):
鉤子函數(shù)可以結(jié)合 CSS ?transitions/animations使用,也可以單獨使用
當(dāng)只用 JavaScript 過渡的時候,在enter和leave中,回調(diào)函數(shù)done是必須的。 否則,它們會被同步調(diào)用,過渡會立即完成。
推薦對于僅使用 JavaScript 過渡的元素添加v-bind:css="false",Vue 會跳過 CSS 的檢測。這也可以避免過渡過程中 CSS 的影響。
當(dāng)有相同標(biāo)簽名的元素切換時,需要通過key特性設(shè)置唯一的值來標(biāo)記以讓 Vue 區(qū)分它們,否則 Vue 為了效率只會替換相同標(biāo)簽內(nèi)部的內(nèi)容。即使在技術(shù)上沒有必要,給在組件中的多個元素設(shè)置 key 是一個更好的實踐。
同時生效的進(jìn)入和離開的過渡不能滿足所有要求,所以 Vue 提供了過渡模式
in-out: 新元素先進(jìn)行過渡,完成之后當(dāng)前元素過渡離開。
out-in: 當(dāng)前元素先進(jìn)行過渡,完成之后新元素過渡進(jìn)入。