本篇資料是小編結(jié)合官方文檔整理的一套更全面細(xì)致的說明，代碼更多更全。

本篇資料來于官方文檔：

http://cn.vuejs.org/guide/transitions.html

下面看下過渡動(dòng)畫相關(guān)知識(shí)：

①過渡動(dòng)畫的定義；

簡(jiǎn)單來說，就是當(dāng)模塊消失、出現(xiàn)時(shí)，會(huì)以什么樣的形式消失和出現(xiàn)；

如果要使用過渡動(dòng)畫，則在標(biāo)簽里加入屬性：

transition=”過渡動(dòng)畫名”

例如：

<div class="box" v-if="box_1" transition="mytran">1</div>

這里是mytran就是過渡動(dòng)畫名，他是一個(gè)類名，動(dòng)畫將基于這個(gè)名字而添加多個(gè)不同的擴(kuò)展名（具體請(qǐng)參看下面）

②過渡動(dòng)畫綁定的事件：

【1】v-if

【2】v-show

【3】v-for（只在插入和刪除時(shí)觸發(fā)，可以自己寫，或者使用vue-animated-list插件）；

自己寫例如：

<div v-for="i in items" class="box" transition="mytran">{{i}}</div>

動(dòng)畫寫法略（參照下面）

【4】動(dòng)態(tài)組件；

【5】在組件的根節(jié)點(diǎn)上，并且被Vue實(shí)例DOM方法觸發(fā)（例如：vm.$appendTo(el)）。大概就是說，把組件添加到某個(gè)根節(jié)點(diǎn)上去。

③CSS動(dòng)畫：

【1】首先，需要有transition屬性，然后取得其值；

【2】其次，CSS里需要有以值為名的三個(gè)類名，分別是：

假設(shè)transition的值為mytran，則類名為

說明

.mytran-transition

動(dòng)畫狀態(tài)，css的transition屬性放在這里，他表示的類會(huì)始終存在于DOM之上；

另外這里的樣式會(huì)覆蓋標(biāo)簽的默認(rèn)class提供的樣式

.mytran-enter

進(jìn)入時(shí)，組件從這個(gè)css狀態(tài)擴(kuò)展為當(dāng)前css狀態(tài)，這個(gè)類只存在最開始的一幀

.mytran-leave

退出時(shí)，組件從原來的css狀態(tài)恢復(fù)為這個(gè)狀態(tài)，這個(gè)類從退出開始時(shí)生效，在退出結(jié)束時(shí)刪除。

如代碼：

<style> 
.box { 
width: 100px; 
height: 100px; 
border: 1px solid red; 
display: inline-block; 
} 

/*這個(gè)定義動(dòng)畫情況，以及存在時(shí)的樣式，這個(gè)樣式會(huì)覆蓋class里的樣式*/ 
.mytran-transition { 
transition: all 0.3s ease; 
background-color: greenyellow; 
} 

/* .mytran-enter 定義進(jìn)入的開始狀態(tài) */ 
/* .mytran-leave 定義離開的結(jié)束狀態(tài) */ 
.mytran-enter, .mytran-leave { 
height: 0; 
width: 0; 
} 
</style> 
<div id="app"> 
<button @click="change">點(diǎn)擊隨機(jī)隱藏和顯示</button> 
<br/> 
<div class="box" v-if="box_1" transition="mytran">1</div> 
<div class="box" v-if="box_2" transition="mytran">2</div> 
<div class="box" v-if="box_3" transition="mytran">3</div> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
data: { 
box_1: true, 
box_2: true, 
box_3: true 
}, 
methods: { 
change: function () { 
for (var i = 1; i < 4; i++) { 
this['box_' + i] = Math.random() > 0.5 ? true : false; 
} 
} 
} 
}) 
setInterval(vm.change, 300); 
</script>

點(diǎn)擊會(huì)隨機(jī)讓3個(gè)方塊隱藏或者顯示；

④JavaScript鉤子：

【1】簡(jiǎn)單來說，這個(gè)不影響CSS動(dòng)畫（依然是那三個(gè)類的變化）；

【2】這個(gè)主要用于抓取進(jìn)入和離開各四個(gè)時(shí)刻，用于做某些事情；

【3】這八個(gè)時(shí)刻分別為：

進(jìn)入：beforeEnter（進(jìn)入之前），enter（進(jìn)入動(dòng)畫剛開始），afterEnter（進(jìn)入動(dòng)畫結(jié)束），enterCancelled（進(jìn)入被中斷）；

退出：beforeLeave（退出之前），leave（退出動(dòng)畫剛開始），afterLeave（退出動(dòng)畫結(jié)束），leaveCancelled（退出被中斷）；

【4】對(duì)DOM的修改，部分情況下會(huì)恢復(fù)，例如在leave這一步修改dom的textContent屬性，將在dom重新進(jìn)入時(shí)恢復(fù)原狀；但若在enter這一步修改，則不會(huì)恢復(fù)。

如代碼：

Vue.transition('mytran', { 
beforeEnter: function (el) { //進(jìn)入之前 
console.log("進(jìn)入動(dòng)畫開始時(shí)間:" + new Date().getTime()); 
}, 
enter: function (el) { 
el.textContent = new Date(); 
}, 
afterEnter: function (el) { 
console.log("進(jìn)入結(jié)束時(shí)間:" + new Date().getTime()); 
}, 
beforeLeave: function (el) { 
console.log("離開動(dòng)畫開始時(shí)間:" + new Date().getTime()); 
}, 
leave: function (el) { 
$(el).text("離開中..." + new Date()); 
}, 
afterLeave: function (el) { 
console.log("離開結(jié)束時(shí)間:" + new Date().getTime()); 
} 
})

⑤自定義過渡類名：

之所以要自定義過渡類名，是因?yàn)槲覀儾豢赡芤竺總€(gè)css動(dòng)畫的樣式，都是按照Vuejs標(biāo)準(zhǔn)的寫法來寫的（比如我們下載別人寫的代碼）；

注：需要在聲明相關(guān)的Vue實(shí)例之前進(jìn)行定義。

首先，推薦一個(gè)Vuejs官方教程推薦的動(dòng)畫集合：（這個(gè)不是下載鏈接，需要打開它去找到下載鏈接才能下載）

https://daneden.github.io/animate.css/

下載后，導(dǎo)入這個(gè)css文件，然后開始自定義動(dòng)畫；

<div id="app"> 
<button @click="change">點(diǎn)擊隨機(jī)隱藏和顯示</button> 
<br/> 
<div class="box animated" v-if="box" transition="bounce">1</div> 
</div> 
<script> 
Vue.transition("bounce", { 
enterClass: 'bounceInLeft', 
leaveClass: 'bounceOutRight' 
}) 
var vm = new Vue({ 
el: '#app', 
data: { 
box: true 
}, 
methods: { 
change: function () { 
this.box = !this.box; 
} 
} 
}); 
</script>

解釋：

【1】進(jìn)行動(dòng)畫的標(biāo)簽，需要有animated這個(gè)class；

【2】enterClass和leaveClass相當(dāng)于之前的xxx-enter和xxx-leave；

【3】效果是從左邊閃進(jìn)來，從右邊閃出去。

【4】需要在聲明Vue實(shí)例前設(shè)置動(dòng)畫，否則會(huì)無效；

⑥使用animation動(dòng)畫

在Vuejs中，animation動(dòng)畫和transition動(dòng)畫是不同的。

簡(jiǎn)單來說，transition動(dòng)畫分為三步：常駐類，進(jìn)入時(shí)觸發(fā)的類，退出時(shí)觸發(fā)的類；只有常駐類有transition動(dòng)畫屬性，其他兩步只有css狀態(tài)；

而animation動(dòng)畫分為兩步：進(jìn)入時(shí)觸發(fā)的類，退出時(shí)觸發(fā)的類。當(dāng)然，還有xxx-transition這個(gè)類存在于dom之中（這個(gè)類可以用于設(shè)置動(dòng)畫原點(diǎn)，或者干脆不設(shè)置這個(gè)類）；

在animation動(dòng)畫中，進(jìn)入和退出時(shí)的class類，都應(yīng)該有動(dòng)畫效果，例如：

@keyframes fat { 
0% { 
width: 100px 
} 
50% { 
width: 200px 
} 
100% { 
width: 100px 
} 
} 
.fat-leave, .fat-enter { 
animation: fat 1s both; 
}

進(jìn)入和退出時(shí)，執(zhí)行的類名和transition一樣，都是xxx-leave和xxx-enter這樣格式的；

當(dāng)然，也可以自定義類名。

示例代碼：

<style> 
.box { 
width: 100px; 
height: 100px; 
border: 1px solid red; 
display: inline-block; 
} 
@keyframes fat { 
0% { 
width: 100px 
} 
50% { 
width: 200px 
} 
100% { 
width: 100px 
} 
} 
.fat-leave, .fat-enter { 
animation: fat 1s both; 
} 
</style> 
<div id="app"> 
<button @click="change">點(diǎn)擊隨機(jī)隱藏和顯示</button> 
<br/> 
<div class="box animated" v-if="box" transition="fat">1</div> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
data: { 
box: true 
}, 
methods: { 
change: function () { 
this.box = !this.box; 
} 
} 
}); 
</script>

效果：

消失：先變寬，再恢復(fù)，然后消失；

進(jìn)入：出現(xiàn)，變寬，再恢復(fù)，停留；

這里偷懶共用了同一個(gè)動(dòng)畫效果。

⑦除此之外，還有

【1】顯式聲明動(dòng)畫類型（假如動(dòng)畫同時(shí)存在transition和animation，且分情況執(zhí)行其中一種）；

【2】過渡流程詳解（觸發(fā)動(dòng)畫時(shí)，js鉤子執(zhí)行與css執(zhí)行的順序）；

【3】CSS動(dòng)畫（就是animation，像上面那樣已經(jīng)寫過了，具體略）；

【4】JavaScript過渡（不是js鉤子，鉤子是指在某個(gè)階段會(huì)調(diào)用某個(gè)函數(shù)，但這個(gè)鉤子跟動(dòng)畫無關(guān)），用JavaScript來控制動(dòng)畫，比如jquery的animate方法；

【5】v-for使用的漸進(jìn)過渡；

由于暫時(shí)用不上，所以略掉，需要查看的請(qǐng)打開連接：

http://cn.vuejs.org/guide/transitions.html

以上所述是小編給大家介紹的Vuejs第七篇之Vuejs過渡動(dòng)畫案例全面解析，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論