Vue中CSS動(dòng)畫(huà)原理的實(shí)現(xiàn)

下面這段代碼，是點(diǎn)擊按鈕實(shí)現(xiàn)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
 }
 }
})

此時(shí)有一個(gè)需求，希望是在顯示與隱藏時(shí)，能實(shí)現(xiàn)漸隱漸現(xiàn)的動(dòng)畫(huà)效果。

<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有一個(gè)動(dòng)畫(huà)效果的話，需要在外面套一層transition標(biāo)簽，意思它包裹的內(nèi)容，有一個(gè)動(dòng)畫(huà)效果，可以給它一個(gè)名字name="fade"。

enter

當(dāng)一個(gè)元素被transition標(biāo)簽包裹之后，Vue 會(huì)自動(dòng)的分析元素的css樣式，然后構(gòu)建動(dòng)畫(huà)流程

在動(dòng)畫(huà)還沒(méi)有執(zhí)行的一瞬間，Vue 會(huì)幫我們?cè)赿om標(biāo)簽上添加兩個(gè)class，分別是fade-enter、fade-enter-active。

當(dāng)動(dòng)畫(huà)第一幀執(zhí)行結(jié)束之后，transition這個(gè)標(biāo)簽分析過(guò)，里面有一個(gè)動(dòng)畫(huà)效果，Vue 會(huì)在動(dòng)畫(huà)運(yùn)行到第二幀的時(shí)候，會(huì)將dom標(biāo)簽上v-enter的class刪除，再添加一個(gè)v-enter-to的class。

接著動(dòng)畫(huà)會(huì)繼續(xù)執(zhí)行，執(zhí)行到結(jié)束的一瞬間，Vue 會(huì)干一件事，它會(huì)把之前添加的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分別寫(xiě)上樣式就行了。這里要注意的是 Vue 中默認(rèn)以v開(kāi)頭，如：v-enter，transition加個(gè)name屬性，就可以用name屬性值做開(kāi)頭，如：fade-enter。

現(xiàn)在這里兩個(gè)class的意思是：
動(dòng)畫(huà)還沒(méi)執(zhí)行時(shí)，就已經(jīng)有fade-enter，fade-enter-active，動(dòng)畫(huà)第一幀運(yùn)行時(shí)fade-enter就會(huì)被移除，css效果opacity: 0就會(huì)變成opacity: 1，直到動(dòng)畫(huà)執(zhí)行完fade-enter-active才會(huì)被移除，這期間它用transition對(duì)opacity進(jìn)行監(jiān)控，需要3s才能完成。

leave

隱藏的動(dòng)畫(huà)流程：

隱藏的第一個(gè)瞬間時(shí)，Vue 會(huì)在dom上添加兩個(gè)class，分別是v-leave和v-leave-active

運(yùn)行到第二幀時(shí)，Vue 會(huì)將v-leave移除，再添加一個(gè)v-leave-to

接著動(dòng)畫(huà)會(huì)繼續(xù)執(zhí)行，執(zhí)行到結(jié)束的一瞬間，Vue 會(huì)把之前添加的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
 }
 }
})

為什么加了這兩個(gè)css動(dòng)畫(huà)效果就出來(lái)了呢？

從動(dòng)畫(huà)執(zhí)行的第一個(gè)瞬間，到動(dòng)畫(huà)執(zhí)行完畢，fade-leave-active這個(gè)class都存在。也就是在動(dòng)畫(huà)運(yùn)行過(guò)程中，我要時(shí)刻監(jiān)聽(tīng)div的opacity，一旦opacity發(fā)生變化，我要讓讓他在3s內(nèi)執(zhí)行完畢。

在第一個(gè)瞬間fade-leave的opacity為1，就是顯示狀態(tài)；第二個(gè)瞬間opacity為0了，此時(shí)要給它添加一個(gè)fade-leave-to的class，而fade-leave-active一直在監(jiān)聽(tīng)opacity的變化，一旦opacity發(fā)生變化，會(huì)讓它在3s內(nèi)完成

自定義class

如果我不想用 Vue 提供的這六個(gè)class，我想自定義一個(gè)class，該怎么實(shí)現(xiàn)呢？

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

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

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

利用這個(gè)特性，在項(xiàng)目中需使用復(fù)雜的css樣式時(shí)，就可以引入第三方css樣式庫(kù)，這里介紹一個(gè)animate.css的庫(kù)。

使用第三方庫(kù)（animate.css），需要注意兩點(diǎn)：

1. 必須使用自定義class的方式
2. 自定義class中必須有一個(gè)animated的class

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

上面是按鈕點(diǎn)擊了才會(huì)出現(xiàn)動(dòng)畫(huà)效果，但此時(shí)需求想要實(shí)現(xiàn)一入場(chǎng)就有動(dòng)畫(huà)效果該怎么實(shí)現(xiàn)呢？

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

如需要在一進(jìn)入就有動(dòng)畫(huà)，需要借助兩個(gè)自定義屬性：appear、appear-active-class來(lái)實(shí)現(xiàn)，看上面代碼。

過(guò)渡transition和動(dòng)畫(huà)animation同時(shí)使用

當(dāng)同時(shí)使用transition和animation動(dòng)畫(huà)時(shí)，動(dòng)畫(huà)時(shí)長(zhǎng)是由誰(shuí)來(lái)確定呢？

Vue 提供了可手動(dòng)設(shè)置，看下面代碼

<transition name="fade"
 type="transition" //可手動(dòng)設(shè)置動(dòng)畫(huà)時(shí)長(zhǎng)以 transition 為準(zhǔn)
 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標(biāo)簽中，可以使用type屬性，它的用途是：如果同時(shí)有transition和animation時(shí)，此時(shí)將type設(shè)置為transition，它就以transition動(dòng)畫(huà)時(shí)長(zhǎng)為準(zhǔn)。

回到代碼，現(xiàn)在需要自己定義動(dòng)畫(huà)的時(shí)長(zhǎng)，該怎么實(shí)現(xiàn)呢？

<transition name="fade"
 :duration="10000" //動(dòng)畫(huà)總時(shí)長(zhǎng)為 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的屬性，可以自定義動(dòng)畫(huà)時(shí)長(zhǎng)。

這個(gè)自定義動(dòng)畫(huà)時(shí)長(zhǎng)，還可以設(shè)置的復(fù)雜一點(diǎn)：

<transition name="fade"
 :duration="{enter:5000,leave:10000}" //可分別設(shè)置 enter 動(dòng)畫(huà)時(shí)長(zhǎng)和 leave 動(dòng)畫(huà)時(shí)長(zhǎng)
 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標(biāo)簽中中不光v-if能控制顯示隱藏，v-show也能控制顯示隱藏，甚至動(dòng)態(tài)組件也行。只要在transition中標(biāo)簽中動(dòng)畫(huà)發(fā)生變化，都會(huì)有一個(gè)過(guò)渡效果

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com