一、vue中動畫簡單介紹

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

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

二、vue的transition動畫

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

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

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

具體流程如下所示

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

四、transition過渡動畫的class屬性

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

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

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

六、transition過渡css動畫

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

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

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

七、顯示的指定動畫的時間

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

八、transition的過渡模式

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

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

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

十、appear初次渲染

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

十一、animate.css

animate.css網(wǎng)站

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

使用步驟：

一、安裝 npm install animate.css

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

三、使用animate提供的動畫或者是類

使用css樣式

使用類

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

十二、gsap庫

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

在執(zhí)行過渡動畫時，會進行done()回調(diào)，否則會進行同步，過渡會立即完成。

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

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

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

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

因為我們在使用transition組件時，其中包含的是單個組件，如果我們想要在其中包含多個組件，那么該如何去做?此時我們有一個標(biāo)簽transiton-group全局組件，我們可以在其中設(shè)置多個標(biāo)簽內(nèi)容。

transition-group具有如下特點：

1、默認(rèn)情況下不會渲染一個元素的包裹器，但是可以指定以一個指定的標(biāo)簽進行渲染。
2、過渡模式不可用，因為我們不切換特定的元素
3、內(nèi)部元素總是需要提供一個key:attribute的值
4、css過渡樣式類，會作用在內(nèi)部元素中，而不是外部標(biāo)簽上。

十五、列表的交錯過渡案例二

總結(jié)

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

最新評論