Vue中CSS動畫原理的實現

來源：懂視網責編：小采時間：2020-11-27 22:01:06

Vue中CSS動畫原理的實現

Vue中CSS動畫原理的實現:下面這段代碼，是點擊按鈕實現hello world顯示與隱藏 <div id=root> <div v-if=show>hello world</div> <button @click=handleClick>按鈕</button> </div> let

推薦度：

點擊下載本文 文檔為doc格式

導讀Vue中CSS動畫原理的實現:下面這段代碼，是點擊按鈕實現hello world顯示與隱藏 <div id=root> <div v-if=show>hello world</div> <button @click=handleClick>按鈕</button> </div> let

下面這段代碼，是點擊按鈕實現hello world顯示與隱藏

<div id="root">
 <div v-if="show">hello world</div>
 <button @click="handleClick">按鈕</button>
</div>
let vm = new Vue({
 el: '#root',
 data: {
 show:true
 },
 methods: {
 handleClick(){
 this.show = !this.show
 }
 }
})

此時有一個需求，希望是在顯示與隱藏時，能實現漸隱漸現的動畫效果。

<div id="root">
 <transition name="fade">
 <div v-if="show">hello world</div>
 </transition>
 <button @click="handleClick">按鈕</button>
</div>
let vm = new Vue({
 el: '#root',
 data: {
 show:true
 },
 methods: {
 handleClick(){
 this.show = !this.show
 }
 }
})

如果希望hello world有一個動畫效果的話，需要在外面套一層transition標簽，意思它包裹的內容，有一個動畫效果，可以給它一個名字name="fade"。

enter

當一個元素被transition標簽包裹之后，Vue 會自動的分析元素的css樣式，然后構建動畫流程

在動畫還沒有執行的一瞬間，Vue 會幫我們在dom標簽上添加兩個class，分別是fade-enter、fade-enter-active。

當動畫第一幀執行結束之后，transition這個標簽分析過，里面有一個動畫效果，Vue 會在動畫運行到第二幀的時候，會將dom標簽上v-enter的class刪除，再添加一個v-enter-to的class。

接著動畫會繼續執行，執行到結束的一瞬間，Vue 會干一件事，它會把之前添加的v-enter-to和v-enter-active都刪除，

.fade-enter{
 opacity: 0;
}
.fade-enter-active{
 transition: opacity 3s;
}
<div id="root">
 <transition name="fade">
 <div v-if="show">hello world</div>
 </transition>
 <button @click="handleClick">按鈕</button>
</div>
let vm = new Vue({
 el: '#root',
 data: {
 show:true
 },
 methods: {
 handleClick(){
 this.show = !this.show
 }
 }
})

我們只需要在css中給fade-enter和fade-enter-active分別寫上樣式就行了。這里要注意的是 Vue 中默認以v開頭，如：v-enter，transition加個name屬性，就可以用name屬性值做開頭，如：fade-enter。

現在這里兩個class的意思是：
動畫還沒執行時，就已經有fade-enter，fade-enter-active，動畫第一幀運行時fade-enter就會被移除，css效果opacity: 0就會變成opacity: 1，直到動畫執行完fade-enter-active才會被移除，這期間它用transition對opacity進行監控，需要3s才能完成。

leave

隱藏的動畫流程：

隱藏的第一個瞬間時，Vue 會在dom上添加兩個class，分別是v-leave和v-leave-active

運行到第二幀時，Vue 會將v-leave移除，再添加一個v-leave-to

接著動畫會繼續執行，執行到結束的一瞬間，Vue 會把之前添加的v-leave-to和v-leave-active都刪除。

.fade-leave-to{
 opacity: 0;
}
.fade-leave-active{
 transition: opacity 3s;
}
<div id="root">
 <transition name="fade">
 <div v-if="show">hello world</div>
 </transition>
 <button @click="handleClick">按鈕</button>
</div>
let vm = new Vue({
 el: '#root',
 data: {
 show:true
 },
 methods: {
 handleClick(){
 this.show = !this.show
 }
 }
})

為什么加了這兩個css動畫效果就出來了呢？

從動畫執行的第一個瞬間，到動畫執行完畢，fade-leave-active這個class都存在。也就是在動畫運行過程中，我要時刻監聽div的opacity，一旦opacity發生變化，我要讓讓他在3s內執行完畢。

在第一個瞬間fade-leave的opacity為1，就是顯示狀態；第二個瞬間opacity為0了，此時要給它添加一個fade-leave-to的class，而fade-leave-active一直在監聽opacity的變化，一旦opacity發生變化，會讓它在3s內完成

自定義class

如果我不想用 Vue 提供的這六個class，我想自定義一個class，該怎么實現呢？

.active,.leave{
 transition: opacity 3s;
}

Vue 給我們提供了一個自定義的屬性的方法，使用enter-active-class就能自定義一個enter類；使用leave-active-class就用自定義一個leave類。

<transition name="fade" 
 enter-active-class="active"
 leave-active-class="leave"
 <div v-if="show">hello world</div>
</transition>

利用這個特性，在項目中需使用復雜的css樣式時，就可以引入第三方css樣式庫，這里介紹一個animate.css的庫。

使用第三方庫（animate.css），需要注意兩點：

必須使用自定義class的方式
自定義class中必須有一個animated的class

<transition name="fade" 
 enter-active-class="animated swing"
 leave-active-class="animated shake"
 <div v-if="show">hello world</div>
</transition>

上面是按鈕點擊了才會出現動畫效果，但此時需求想要實現一入場就有動畫效果該怎么實現呢？

<transition name="fade" 
 appear // 加上 appear 屬性
 enter-active-class="animated swing"
 leave-active-class="animated shake"
 appear-active-class="animated swing" //使用自定義屬性 appear-active-class 就可以實現
 <div v-if="show">hello world</div>
</transition>

如需要在一進入就有動畫，需要借助兩個自定義屬性：appear、appear-active-class來實現，看上面代碼。

過渡transition和動畫animation同時使用

當同時使用transition和animation動畫時，動畫時長是由誰來確定呢？

Vue 提供了可手動設置，看下面代碼

<transition name="fade"
 type="transition" //可手動設置動畫時長以 transition 為準
 appear
 enter-active-class="animated swing"
 leave-active-class="animated shake"
 appear-active-class="animated swing"
 <div v-if="show">hello world</div>
</transition>

在transition標簽中，可以使用type屬性，它的用途是：如果同時有transition和animation時，此時將type設置為transition，它就以transition動畫時長為準。

回到代碼，現在需要自己定義動畫的時長，該怎么實現呢？

<transition name="fade"
 :duration="10000" //動畫總時長為 10s
 appear
 enter-active-class="animated swing"
 leave-active-class="animated shake"
 appear-active-class="animated swing"
 <div v-if="show">hello world</div>
</transition>

Vue 提供了duration的屬性，可以自定義動畫時長。

這個自定義動畫時長，還可以設置的復雜一點：

<transition name="fade"
 :duration="{enter:5000,leave:10000}" //可分別設置 enter 動畫時長和 leave 動畫時長
 appear
 enter-active-class="animated swing"
 leave-active-class="animated shake"
 appear-active-class="animated swing"
 <div v-if="show">hello world</div>
</transition>

最后

在transition標簽中中不光v-if能控制顯示隱藏，v-show也能控制顯示隱藏，甚至動態組件也行。只要在transition中標簽中動畫發生變化，都會有一個過渡效果

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com