Vue3中如何實(shí)現(xiàn)過渡動畫？組件和動畫庫方法解析

第Vue3中如何實(shí)現(xiàn)過渡動畫？組件和動畫庫方法解析在實(shí)際開發(fā)中，為了增加用戶體驗(yàn)，經(jīng)常會使用到過渡動畫，而過渡動畫在CSS中是通過transition和animation實(shí)現(xiàn)的。而在Vue中，Vue本身中內(nèi)置了一些組件和API可以幫助我們方便的實(shí)現(xiàn)過渡動畫效果；接下來我們就學(xué)習(xí)一下。

Vue的transition組件

Vue中中提供了transition組件，該組件可以在下列情況之一的情況下，為元素自動添加進(jìn)入/離開的過渡效果：

使用v-if條件渲染

使用v-show條件展示

動態(tài)組件

組件根節(jié)點(diǎn)

使用方式也比較簡單，需要將需要動畫展示的組件或者元素使用transition組件包裹即可，然后定義一組class。

過渡demo

如下代碼展示了transition組件的基本用法：

template

button>

代碼的運(yùn)行結(jié)果如下圖所示：

上面使用的一些class，他們的含義如下所示：

v-enter-from：定義進(jìn)入過渡的開始狀態(tài)。在元素被插入之前生效，在元素被插入之后的下一幀移除。

v-enter-active：定義進(jìn)入過渡生效時(shí)的狀態(tài)。在整個(gè)進(jìn)入過渡的階段中應(yīng)用，在元素被插入之前生效，在過渡/動畫完成之后移除。這個(gè)類可以被用來定義進(jìn)入過渡的過程時(shí)間，延遲和曲線函數(shù)。

v-enter-to：定義進(jìn)入過渡的結(jié)束狀態(tài)。在元素被插入之后下一幀生效(與此同時(shí)v-enter-from被移除)，在過渡/動畫完成之后移除。

v-leave-from：定義離開過渡的開始狀態(tài)。在離開過渡被觸發(fā)時(shí)立刻生效，下一幀被移除。

v-leave-active：定義離開過渡生效時(shí)的狀態(tài)。在整個(gè)離開過渡的階段中應(yīng)用，在離開過渡被觸發(fā)時(shí)立刻生效，在過渡/動畫完成之后移除。這個(gè)類可以被用來定義離開過渡的過程時(shí)間，延遲和曲線函數(shù)。

v-leave-to：離開過渡的結(jié)束狀態(tài)。在離開過渡被觸發(fā)之后下一幀生效(與此同時(shí)v-leave-from被移除)，在過渡/動畫完成之后移除。

下圖是Vue文檔中的一張圖，完美解釋了整個(gè)流程

class的命名規(guī)則

transition組件的class名稱并不是必須以v-作為前綴的，其實(shí)我們可以自定義前綴，只需要添加一個(gè)name屬性，例如transitionname=ywz，那么所有的前綴全部變成了ywz-。

使用animation

前面我們使用了transition屬性實(shí)現(xiàn)了組件進(jìn)入和離開的過渡效果，現(xiàn)在我們可以使用animation屬性實(shí)現(xiàn)，示例代碼如下：

transition

hello-worldv-if=helloWorldShowmsg=【一碗周】過渡動畫演示demo/

/transition

css

/*離開和進(jìn)入過程中的樣式*/

.v-enter-active,

.v-leave-active{

/*添加過渡動畫*/

transition:opacity0.5sease;

}

代碼運(yùn)行結(jié)果如下：

先看一個(gè)問題，當(dāng)動畫在兩個(gè)元素之間切換的時(shí)候，會出現(xiàn)一個(gè)問題，復(fù)現(xiàn)這個(gè)問題的代碼如下：

template

button>

運(yùn)行效果如下：

我們可以看到，在一瞬間兩個(gè)組件是同時(shí)存在的，有的時(shí)候我們不需要這種效果，那么我們需要設(shè)置transition組件的過渡模式，也就是mode屬性，它包含三個(gè)值：

default：新元素與當(dāng)前元素同時(shí)進(jìn)行。

in-out：新元素先進(jìn)行進(jìn)入過渡，完成之后當(dāng)前元素過渡離開。

out-in：當(dāng)前元素先進(jìn)行離開過渡，完成之后新元素過渡進(jìn)入。

了解這個(gè)屬性之后，我們將代碼修改一下，修改后如下：

transitionmode=out-in

hello-worldv-if=showmsg=【一碗周】過渡動畫演示demo/

imgv-elsealt=Vuelogosrc=./assets/logo.png/

/transition

現(xiàn)在的運(yùn)行結(jié)果如下：

appear屬性

transition組件的appear屬性用于開啟手冊渲染的動畫，它接受一個(gè)布爾值，示例代碼如下：

transitionmode=out-inappear

imgv-if=showalt=Vuelogosrc=./assets/logo.png/

/transition

animate.css庫的使用

如