1. 动画开始:@before-enter @before-leave
动画过程: @enter @leave 在这个过程中有done方法,表示动画结束,done方法执行时,就会触发动画结束函数
动画结束:@after-enter @after-leave
注意:动画变化,不是过渡。
<div id="demo">
<button @click="show = !show">click me</button>
<transition name="fade"
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@after-enter="handleAfterEnter">
<div v-if="show" class="de">sfsf</div>
</transition>
</div>
<script>
new Vue({
el: '#demo',
data: {
show: true
},
methods: {
handleBeforeEnter(dom) {
dom.style.color = 'red'
},
handleEnter (dom, done) {
setTimeout( () => {
dom.style.color = 'green'
}, 3000)
setTimeout( () => {
done()
}, 6000)
},
handleAfterEnter (dom) {
dom.style.color = 'black'
}
}
})
</script>
2. 使用第三方js动画库 velocit.js
在过渡过程@enter 和 @leave两个函数中,要按第三方库的写法来写(velocity.js)
<div id="demo">
<button @click="show = !show">click me</button>
<transition name="fade"
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@after-enter="handleAfterEnter">
<div v-if="show" class="de">sfsf</div>
</transition>
</div>
<script>
new Vue({
el: '#demo',
data: {
show: true
},
methods: {
handleBeforeEnter(dom) {
dom.style.opacity = 0
},
handleEnter (dom, done) {
Velocity(dom, {opacity: 1}, {duration: 3000, complete: done})
},
handleAfterEnter (dom) {
console.log("complete animation")
}
}
})
</script>
结果:opacity的设置时过渡,而对color颜色的设置,不是过渡效果