6 進(jìn)入/離開 & 列表過渡
6.1 概述
Vue 在插入翩瓜、更新或者移除 DOM 時(shí)，提供多種不同方式的應(yīng)用過渡效果序无。
包括以下工具：
- 在 CSS 過渡和動畫中自動應(yīng)用 class
- 可以配合使用第三方 CSS 動畫庫验毡，如 Animate.css
- 在過渡鉤子函數(shù)中使用 JavaScript 直接操作 DOM
- 可以配合使用第三方 JavaScript 動畫庫衡创，如 Velocity.js
6.2 transition過渡
Vue 提供了 transition 的封裝組件，在下列情形中晶通，可以給任何元素和組件添加進(jìn)入/離開過渡
- 條件渲染 (使用
v-if) - 條件展示 (使用
v-show) - 動態(tài)組件
- 組件根節(jié)點(diǎn)
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s;
}
.fade-enter,
.fade-leave-to
/* .fade-leave-active below version 2.1.8 */
{
opacity: 0;
}
<div id="demo">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
new Vue({
el: '#demo',
data: {
show: true
}
})
當(dāng)插入或刪除包含在 transition 組件中的元素時(shí)璃氢，Vue 將會做以下處理：
- 自動嗅探目標(biāo)元素是否應(yīng)用了 CSS 過渡或動畫，如果是狮辽，在恰當(dāng)?shù)臅r(shí)機(jī)添加/刪除 CSS 類名一也。
- 如果過渡組件提供了 JavaScript 鉤子函數(shù)，這些鉤子函數(shù)將在恰當(dāng)?shù)臅r(shí)機(jī)被調(diào)用喉脖。
- 如果沒有找到 JavaScript 鉤子并且也沒有檢測到 CSS 過渡/動畫椰苟，DOM 操作 (插入/刪除) 在下一幀中立即執(zhí)行。(注意：此指瀏覽器逐幀動畫機(jī)制树叽，和 Vue 的
nextTick概念不同)
過渡的類名
對需要進(jìn)行動畫控制的元素使用transition標(biāo)簽包裹有一個(gè)name屬性值自定義如name="fade"舆蝴，但是使用css控制時(shí)的前綴必須與name值一致如fade-enter 。
在進(jìn)入/離開的過渡中菱皆，會有 6 個(gè) class 切換,以下v表示name值。
-
v-enter：定義進(jìn)入過渡的開始狀態(tài)挨稿。在元素被插入之前生效仇轻，在元素被插入之后的下一幀移除。 -
v-enter-active：定義進(jìn)入過渡生效時(shí)的狀態(tài)奶甘。在整個(gè)進(jìn)入過渡的階段中應(yīng)用篷店，在元素被插入之前生效，在過渡/動畫完成之后移除臭家。這個(gè)類可以被用來定義進(jìn)入過渡的過程時(shí)間疲陕，延遲和曲線函數(shù)。 -
v-enter-to: 2.1.8版及以上 定義進(jìn)入過渡的結(jié)束狀態(tài)钉赁。在元素被插入之后下一幀生效 (與此同時(shí)v-enter被移除)蹄殃，在過渡/動畫完成之后移除。 -
v-leave: 定義離開過渡的開始狀態(tài)你踩。在離開過渡被觸發(fā)時(shí)立刻生效诅岩，下一幀被移除。 -
v-leave-active：定義離開過渡生效時(shí)的狀態(tài)带膜。在整個(gè)離開過渡的階段中應(yīng)用吩谦，在離開過渡被觸發(fā)時(shí)立刻生效，在過渡/動畫完成之后移除膝藕。這個(gè)類可以被用來定義離開過渡的過程時(shí)間式廷，延遲和曲線函數(shù)。 -
v-leave-to: 2.1.8版及以上 定義離開過渡的結(jié)束狀態(tài)芭挽。在離開過渡被觸發(fā)之后下一幀生效 (與此同時(shí)v-leave被刪除)滑废，在過渡/動畫完成之后移除蝗肪。
Transition Diagram
對于這些在過渡中切換的類名來說，如果你使用一個(gè)沒有名字的 <transition>策严，則 v- 是這些類名的默認(rèn)前綴穗慕。如果你使用了 <transition name="my-transition">，那么 v-enter 會替換為 my-transition-enter妻导。
v-enter-active 和 v-leave-active 可以控制進(jìn)入/離開過渡的不同的緩和曲線逛绵。
6.3 使用animate.css實(shí)現(xiàn)動畫過渡
下載地址：
https://daneden.github.io/animate.css/
<div id="app">
<button type="button" @click="show = !show">隱藏/顯示</button>
<transition enter-active-class='fadeInRight' leave-active-class='fadeOutRight'>
<p v-if="show" class="animated">Hello Animate css</p>
</transition>
</div>
new Vue({
el:'#app',
data:{
show:true
}
})
enter-active-class和leave-active-class是animate.css中定義好的動畫類
6.4 利用鉤子函數(shù)進(jìn)行一半動畫的控制
.show{
transition: all 0.4s ease;
}
<div id="app">
<button type="button" @click="show = !show">隱藏/顯示</button>
<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
<p v-if="show" class="show">Hello Animate css</p>
</transition>
</div>
new Vue({
el:'#app',
data:{
show:true
},
methods:{
//這里主要通過js定義當(dāng)前實(shí)現(xiàn)動畫的初始位置，el表示當(dāng)前操作的元素
beforeEnter:function(el){
el.style.transform = "translate(100px,0)";
},
//通過js定義動畫的結(jié)束位置
enter:function(el,done){
//設(shè)置刷新狀態(tài)
el.offsetWidth;
//設(shè)置動畫的結(jié)束位置
el.style.transform = "translate(0px,0)";
//手動調(diào)用done,保證動畫即時(shí)結(jié)束
done();
},
//動畫的狀態(tài)復(fù)原設(shè)置
afterEnter:function(el){
this.show = !this.show;
}
}
})
