vue3中過渡動(dòng)畫的示例分析

這篇文章主要介紹了vue3中過渡動(dòng)畫的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

一、vue中動(dòng)畫簡單介紹

在vue中如果一些過程不存在動(dòng)畫效果，則表現(xiàn)出來的結(jié)果是比較生硬的。此時(shí)我們需要設(shè)置動(dòng)畫來使得頁面更加靈活。

如上面代碼所示，我們的h2只是在消失和顯示來回切換，但是這樣效果生硬。
此時(shí)我們使用transition組件來實(shí)現(xiàn)動(dòng)畫效果。

二、vue的transition動(dòng)畫

transition組件可以添加name屬性,注意name屬性值可以為class樣式的第一個(gè)字符串。上面例子會(huì)在出現(xiàn)和消失會(huì)展示出來opacity漸變的情況。

三、transition組件的實(shí)現(xiàn)原理

上面的圖為在來回切換過程中，h2標(biāo)簽中的class的變化，我們可以看到在進(jìn)行漸變過程中，vue通過控制標(biāo)簽中的class的改變來實(shí)現(xiàn)動(dòng)畫效果。

具體流程如下所示

1、當(dāng)在transition全局組件中進(jìn)行dom插入或者刪除時(shí)，此時(shí)vue會(huì)自動(dòng)檢測是否存在相關(guān)的css樣式，如果存在，則在適當(dāng)
的時(shí)機(jī)將class樣式添加或者刪除。
2、如果transition提供生命周期鉤子，那么該鉤子會(huì)在適當(dāng)?shù)臅r(shí)候進(jìn)行回調(diào)。
3、如果不存在css樣式也不存在生命周期鉤子，那么dom插入和刪除都會(huì)立即執(zhí)行。

四、transition過渡動(dòng)畫的class屬性

v-enter-from:定義進(jìn)入過渡的開始狀態(tài)。在元素被插入之前生效，在元素被插入之后的下一幀移除
v-enter-active:定義進(jìn)入過渡生效時(shí)的狀態(tài)。在整個(gè)進(jìn)入過渡的階段中應(yīng)用，在元素被插入之前生效，在過渡/動(dòng)
畫完成之后移除。這個(gè)類可以被用來定義進(jìn)入過渡的過程時(shí)間，延遲和曲線函數(shù)
v-enter-to:定義進(jìn)入過渡的結(jié)束狀態(tài)。在元素被插入之后下一幀生效 (與此同時(shí) v-enter-from 被移除)，在過渡/
動(dòng)畫完成之后移除。
v-leave-from:定義離開過渡的開始狀態(tài)。在離開過渡被觸發(fā)時(shí)立刻生效，下一幀被移除.
v-leave-active:定義離開過渡生效時(shí)的狀態(tài)。在整個(gè)離開過渡的階段中應(yīng)用，在離開過渡被觸發(fā)時(shí)立刻生效，在
過渡/動(dòng)畫完成之后移除。這個(gè)類可以被用來定義離開過渡的過程時(shí)間，延遲和曲線函數(shù)。
v-leave-to:離開過渡的結(jié)束狀態(tài)。在離開過渡被觸發(fā)之后下一幀生效 (與此同時(shí) v-leave-from 被刪除)，在過渡/
動(dòng)畫完成之后移除

五、class的添加時(shí)機(jī)和命名規(guī)則

如果在transition中不存在，使用v-代替，如果存在name屬性，則使用名稱why-enter-active。

六、transition過渡css動(dòng)畫

如圖所示使用只需要使用enter-active，和leave-active設(shè)置相關(guān)的動(dòng)畫樣式。

思考:如果出現(xiàn)一個(gè)問題：就是我們在一個(gè)動(dòng)畫中同時(shí)使用animation和transition，時(shí)間不一致該如何做.

如上圖所示，我們設(shè)置動(dòng)畫和過渡效果，但是兩者時(shí)間不一致，此時(shí)我們可以設(shè)置type屬性，其值一個(gè)為animation另一個(gè)為transition,設(shè)置該屬性時(shí)，來告知transition組件監(jiān)聽屬性的類型。

七、顯示的指定動(dòng)畫的時(shí)間

可以在transition組件上，設(shè)置duration屬性,其值可以為number類型，也可以是Object類型。這樣設(shè)置時(shí)間就相當(dāng)于強(qiáng)制設(shè)置時(shí)間，無論動(dòng)畫是否執(zhí)行完畢，都會(huì)當(dāng)duration到達(dá)時(shí)間后，顯示最終效果。

八、transition的過渡模式

可以這樣理解：如上述代碼所示，我們將使用v-if和v-else進(jìn)行兩種狀態(tài)的設(shè)置。如果不存在mode屬性的話，則兩個(gè)狀態(tài)都會(huì)同時(shí)執(zhí)行動(dòng)畫，導(dǎo)致用戶體驗(yàn)不友好，此時(shí)我們設(shè)置mode可以設(shè)置兩種模式out-in和in-out，out-in表現(xiàn)為去除的標(biāo)簽元素先執(zhí)行，然后再執(zhí)行顯示的。in-out則反之。

九、動(dòng)態(tài)組件的切換

組件的動(dòng)畫使用和一般標(biāo)簽的動(dòng)畫使用過程是一樣的。

十、appear初次渲染

我們可以使用appear來設(shè)置初次渲染的動(dòng)畫效果。

十一、animate.css

animate.css網(wǎng)站

如果我們在開發(fā)中使用的動(dòng)畫都是自己寫的，這樣的效率比較低下，此時(shí)我們存在第三方庫，其中存在一些動(dòng)畫，我們可以使用。

使用步驟：

一、安裝 npm install animate.css

二、導(dǎo)入animate.css樣式

三、使用animate提供的動(dòng)畫或者是類

使用css樣式

使用類

animate__animated是一些配置信息樣式。如圖所示就是一些時(shí)間，模式默認(rèn)設(shè)置，所以該類是必須加上的，animate__..才是需要添加的樣式。

十二、gsap庫

transition中的一些生命周期函數(shù)，如上圖所示。

在執(zhí)行過渡動(dòng)畫時(shí)，會(huì)進(jìn)行done()回調(diào)，否則會(huì)進(jìn)行同步，過渡會(huì)立即完成。

:css:false：表示vue會(huì)忽略css檢測，除了性能更高以外，還避免過渡過程中css規(guī)則影響。一般常用的函數(shù)有enter和leave函數(shù)。

gsap的詳細(xì)的參數(shù)設(shè)置

十三、gsap實(shí)現(xiàn)數(shù)字變化

十四、實(shí)現(xiàn)列表的過渡

因?yàn)槲覀冊谑褂?code>transition組件時(shí)，其中包含的是單個(gè)組件，如果我們想要在其中包含多個(gè)組件，那么該如何去做?此時(shí)我們有一個(gè)標(biāo)簽transiton-group全局組件，我們可以在其中設(shè)置多個(gè)標(biāo)簽內(nèi)容。

transition-group具有如下特點(diǎn)：

1、默認(rèn)情況下不會(huì)渲染一個(gè)元素的包裹器，但是可以指定以一個(gè)指定的標(biāo)簽進(jìn)行渲染。
2、過渡模式不可用，因?yàn)槲覀儾磺袚Q特定的元素
3、內(nèi)部元素總是需要提供一個(gè)key:attribute的值
4、css過渡樣式類，會(huì)作用在內(nèi)部元素中，而不是外部標(biāo)簽上。

十五、列表的交錯(cuò)過渡案例二

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“vue3中過渡動(dòng)畫的示例分析”這篇文章對大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!