本文為轉(zhuǎn)載盐碱，原文：Vue學(xué)習(xí)筆記進(jìn)階篇——單元素過度
概述
Vue 在插入把兔、更新或者移除 DOM 時沪伙，提供多種不同方式的應(yīng)用過渡效果。
包括以下工具：
在 CSS 過渡和動畫中自動應(yīng)用 class
可以配合使用第三方 CSS 動畫庫县好，如 Animate.css
在過渡鉤子函數(shù)中使用 JavaScript 直接操作 DOM
可以配合使用第三方 JavaScript 動畫庫围橡，如 Velocity.js
單元素/組件的過度
Vue 提供了 transition 的封裝組件，在下列情形中缕贡，可以給任何元素和組件添加 entering/leaving 過渡
條件渲染 （使用 v-if）
條件展示 （使用 v-show）
動態(tài)組件
組件根節(jié)點
這里是一個典型的例子：
<div id="app1">
<button @click="show = !show">toggle</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
new Vue({
el:'#app1',
data:{
show:true
}
})
.fade-enter-active, .fade-leave-active{
transition: opacity 2s;
}
.fade-enter, .fade-leave-to{
opacity: 0;
}
運(yùn)行結(jié)果如下：
點擊toggle按鈕會看見文字淡入淡出的效果翁授。
當(dāng)插入或刪除包含在 transition 組件中的元素時，Vue 將會做以下處理：
- 自動嗅探目標(biāo)元素是否應(yīng)用了 CSS 過渡或動畫晾咪，如果是收擦，在恰當(dāng)?shù)臅r機(jī)添加/刪除 CSS 類名。
- 如果過渡組件提供了 JavaScript 鉤子函數(shù)谍倦，這些鉤子函數(shù)將在恰當(dāng)?shù)臅r機(jī)被調(diào)用塞赂。
- 如果沒有找到 JavaScript 鉤子并且也沒有檢測到 CSS 過渡/動畫，DOM 操作（插入/刪除）在下一幀中立即執(zhí)行昼蛀。(注意：此指瀏覽器逐幀動畫機(jī)制减途，和Vue的 nextTick 概念不同)
過度的CSS類名
-
v-enter: 定義進(jìn)入過渡的開始狀態(tài)。在元素被插入時生效，在下一個幀移除。 -
v-enter-active: 定義過渡的狀態(tài)赂韵。在元素整個過渡過程中作用章鲤，在元素被插入時生效，在 transition/animation 完成之后移除怕轿。 這個類可以被用來定義過渡的過程時間偷崩，延遲和曲線函數(shù)。 -
v-enter-to: 2.1.8版及以上 定義進(jìn)入過渡的結(jié)束狀態(tài)撞羽。在元素被插入一幀后生效（于此同時 v-enter 被刪除）阐斜，在 transition/animation 完成之后移除。 -
v-leave: 定義離開過渡的開始狀態(tài)诀紊。在離開過渡被觸發(fā)時生效谒出，在下一個幀移除。 -
v-leave-active: 定義過渡的狀態(tài)邻奠。在元素整個過渡過程中作用笤喳，在離開過渡被觸發(fā)后立即生效，在 transition/animation 完成之后移除碌宴。 這個類可以被用來定義過渡的過程時間杀狡，延遲和曲線函數(shù)。 -
v-leave-to: 2.1.8版及以上 定義離開過渡的結(jié)束狀態(tài)贰镣。在離開過渡被觸發(fā)一幀后生效（于此同時 v-leave 被刪除）呜象，在 transition/animation 完成之后移除膳凝。
對于這些在 enter/leave 過渡中切換的類名，v- 是這些類名的前綴恭陡。使用 <transition name="my-transition" 可以重置前綴蹬音，比如 v-enter 替換為 my-transition-enter。
CSS過度
常用的過渡都是使用 CSS 過渡子姜。以下為示例代碼祟绊。
<div id="app2">
<button @click="show = !show">toggle css</button>
<transition name="slide-fade">
<p v-if="show">CSS 過渡</p>
</transition>
</div>
new Vue({
el:'#app2',
data:{
show:true
}
})
.slide-fade-enter-active{
transition: all .3s ease;
}
.slide-fade-leave-active{
transition: all .8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.slide-fade-enter, .slide-fade-leave-to{
transform: translateX(100px);
opacity: 0;
}
運(yùn)行結(jié)果
點擊按鈕就會看到動畫效果。
CSS動畫
CSS 動畫用法同 CSS 過渡哥捕，區(qū)別是在動畫中 v-enter 類名在節(jié)點插入 DOM 后不會立即刪除牧抽，而是在 animationend 事件觸發(fā)時刪除。
示例： (省略了兼容性前綴)
<div id="app3">
<button @click="show = !show">toggle css</button>
<transition name="bounce">
<p v-if="show">css 動畫</p>
</transition>
</div>
new Vue({
el:'#app3',
data:{
show:true
}
})
.bounce-enter-active{
animation: bounce-in .5s;
}
.bounce-leave-active{
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0%{
transform: scale(0);
}
50%{
transform: scale(1.5);
}
100%{
transform: scale(1);
}
}
運(yùn)行結(jié)果：
自定義過渡類名
我們可以通過以下特性來自定義過渡類名：
- enter-class
- enter-active-class
- enter-to-class (>= 2.1.8 only)
- leave-class
- leave-active-class
- leave-to-class (>= 2.1.8 only)
他們的優(yōu)先級高于普通的類名遥赚，這對于 Vue 的過渡系統(tǒng)和其他第三方 CSS 動畫庫扬舒，如 Animate.css 結(jié)合使用十分有用。
示例：
<link rel="stylesheet" type="text/css">
<div id="app4">
<button @click="show = !show">toggle coustom class</button>
<transition name="bounce"
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight">
<p v-if="show">自定義過渡類名</p>
</transition>
</div>
new Vue({
el:'#app4',
data:{
show:true
}
})
運(yùn)行結(jié)果：
animate.css的學(xué)習(xí)可以參考官網(wǎng)：https://daneden.github.io/animate.css/
javascript鉤子
可以在屬性中聲明 JavaScript 鉤子
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled">
<!-- ... -->
</transition>
methods: {
// --------
// 進(jìn)入中
// --------
beforeEnter: function (el) {
// ...
},
// 此回調(diào)函數(shù)是可選項的設(shè)置
// 與 CSS 結(jié)合時使用
enter: function (el, done) {
// ...
done()
},
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
},
// --------
// 離開時
// --------
beforeLeave: function (el) {
// ...
},
// 此回調(diào)函數(shù)是可選項的設(shè)置
// 與 CSS 結(jié)合時使用
leave: function (el, done) {
// ...
done()
},
afterLeave: function (el) {
// ...
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
// ...
}
}
這些鉤子函數(shù)可以結(jié)合 CSS transitions/animations 使用凫佛，也可以單獨使用讲坎。
當(dāng)只用 JavaScript 過渡的時候， 在
enter和leave中愧薛，回調(diào)函數(shù)done是必須的 晨炕。 否則，它們會被同步調(diào)用毫炉，過渡會立即完成瓮栗。
推薦對于僅使用 JavaScript 過渡的元素添加
v-bind:css="false"，Vue 會跳過 CSS 的檢測瞄勾。這也可以避免過渡過程中 CSS 的影響费奸。
一個使用 Velocity.js 的簡單例子：
<div id="app5">
<button @click="show = !show">toggle hook</button>
<transition @before-enter="beforeEnter"
@enter="enter"
@leave="leave"
:css="false">
<p v-if="show">javascript 鉤子使用</p>
</transition>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script >
new Vue({
el:'#app5',
data:{
show:false
},
methods:{
beforeEnter:function (el) {
el.style.opacity = 0
el.style.transformOrigin = 'left'
},
enter:function (el, done) {
Velocity(el, {opacity:1, fontSize:'1.4em'}, {duration:300})
Velocity(el, {fontSize:'1em'}, {complete:done})
},
leave:function (el, done) {
Velocity(el, {translateX:'15px', rotateZ:'50deg'}, {duration:600})
Velocity(el, {rotateZ:'100deg'}, {loop:2})
Velocity(el,{
rotateZ:'45deg',
translateY:'30px',
translateX:'30px',
opacity:0
}, {complete:done})
}
}
})
</script>
運(yùn)行結(jié)果：
初始渲染的過度
可以通過appear 特性設(shè)置節(jié)點的在初始渲染的過渡
這里默認(rèn)和進(jìn)入和離開過渡一樣，同樣也可以自定義 CSS 類名进陡。
<transition
appear
appear-class="custom-appear-class"
appear-to-class="custom-appear-to-class"
appear-active-class="custom-appear-active-class">
<!-- ... -->
</transition>
自定義 JavaScript 鉤子：
<transition
appear
v-on:before-appear="customBeforeAppearHook"
v-on:appear="customAppearHook"
v-on:after-appear="customAfterAppearHook"
v-on:appear-cancelled="customAppearCancelledHook"
>
<!-- ... -->
</transition>
示例代碼：
<!--初始渲染-->
<div id="app6">
<transition appear
appear-active-class="animated tada">
<p>初始畫面</p>
</transition>
</div>
new Vue({
el:'#app6',
data:{
show:true
}
})
運(yùn)行結(jié)果：
在界面加載該元素時愿阐，會有個過渡效果。
完
本文為原創(chuàng)趾疚，轉(zhuǎn)載請注明出處
上一節(jié)：Vue學(xué)習(xí)筆記入門篇——組件雜項
返回目錄
下一節(jié)：Vue學(xué)習(xí)筆記進(jìn)階篇——多元素及多組件過渡
