一、vue中動(dòng)畫(huà)簡(jiǎn)單介紹

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

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

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

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

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

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

具體流程如下所示

1、當(dāng)在transition全局組件中進(jìn)行dom插入或者刪除時(shí)，此時(shí)vue會(huì)自動(dòng)檢測(cè)是否存在相關(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過(guò)渡動(dòng)畫(huà)的class屬性

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

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

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

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

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

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

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

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

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

八、transition的過(guò)渡模式

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

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

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

十、appear初次渲染

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

十一、animate.css

animate.css網(wǎng)站

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

使用步驟：

一、安裝 npm install animate.css

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

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

使用css樣式

使用類

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

十二、gsap庫(kù)

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

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

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

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

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

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

因?yàn)槲覀冊(cè)谑褂?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、過(guò)渡模式不可用，因?yàn)槲覀儾磺袚Q特定的元素
3、內(nèi)部元素總是需要提供一個(gè)key:attribute的值
4、css過(guò)渡樣式類，會(huì)作用在內(nèi)部元素中，而不是外部標(biāo)簽上。

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

總結(jié)

本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!  

最新評(píng)論