vue中动画函数钩子js动画

1. 动画开始：@before-enter      @before-leave

    动画过程： @enter                 @leave    在这个过程中有done方法，表示动画结束，done方法执行时，就会触发动画结束函数

    动画结束：@after-enter          @after-leave

注意：动画变化，不是过渡。

[code]  <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）

[code]  <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颜色的设置，不是过渡效果