vue-transition動畫
官網(wǎng)API: https://cn.vuejs.org/v2/guide/transitions.html
demo點(diǎn)擊顯示與消失
<div id="demo">
<button v-on:click="show = !show"> Toggle </button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
<script>
new Vue({
el: '#demo',
data: {
show: true
}
})
</script>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-active {
opacity: 0 }
</style>
一、transition使用
<transition name="fade">
運(yùn)動?xùn)|西(元素纪他，屬性趣苏、路由....)
</transition>
class定義：
.fade-enter{ } 進(jìn)入過渡的開始狀態(tài)，元素被插入時(shí)生效后专，只應(yīng)用一幀后立即刪除；(運(yùn)動的初始狀態(tài))
.fade-enter-active{ } 進(jìn)入過渡的結(jié)束狀態(tài)输莺，元素被插入時(shí)就生效戚哎，在 transition/animation 完成之后移除。這個(gè)類可以被用來定義過渡的過程時(shí)間嫂用，延遲和曲線函數(shù)型凳。
.fade-leave{ } 離開過渡的開始狀態(tài)，元素被刪除時(shí)觸發(fā)嘱函，只應(yīng)用一幀后立即刪除甘畅；
.fade-leave-active{ } 離開過渡的結(jié)束狀態(tài)，元素被刪除時(shí)生效，在 transition/animation 完成之后移除疏唾。這個(gè)類可以被用來定義過渡的過程時(shí)間蓄氧，延遲和曲線函數(shù)。
image
二荸实、自定義過度類名
默認(rèn)的.fade-enter變成.fade-in-enter;
默認(rèn)的.fade-enter-active變成.fade-in-active;
默認(rèn)的.fade-leave變成.fade-out-enter;
默認(rèn)的.fade-leave-active變成.fade-out-active;
<transition name="fade"
enter-class="fade-in-enter"
enter-active-class="fade-in-active"
leave-class="fade-out-enter"
leave-active-class="fade-out-active">
<p v-show="show">hello</p>
</transition>
.fade-in-active, .fade-out-active{
transition: all 0.5s ease
}
.fade-in-enter, .fade-out-active{
opacity: 0
}
三匀们、transition相關(guān)函數(shù)
<transition name="fade"
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave">
<p v-show="show"></p>
</transition>
methods:{
beforeEnter(el){
console.log('動畫enter之前');
},
enter(el){
console.log('動畫enter進(jìn)入');
},
afterEnter(el){
console.log('動畫進(jìn)入之后');
el.style.background="blue";
},
beforeLeave(el){
console.log('動畫leave之前');
},
leave(el){
console.log('動畫leave');
},
afterLeave(el){
console.log('動畫leave之后');
el.style.background="red";
}
}
四、transition結(jié)合animate.css使用准给。
<transition enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
<p v-show="show" class="animated"></p>
</transition> 或者 <transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
<p v-show="show"></p>
</transition>
五泄朴、多個(gè)元素運(yùn)動
<transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
<p v-show="show" :key=""></p>
<p v-show="show" :key=""></p>
</transition-group>
