在vue项目中使用js动画库velocity
在vue中通过js实现动画
在vue中通过js实现动画使用的是vue提供的动画钩子函数。
- before-enter:入场动画还未开始执行时
- enter:入场动画开始执行
- after-enter:入场动画执行结束
- before-leave:出场动画还未开始执行时
- enter:出场动画开始执行
- after-leave:出场动画执行结束
<template>
<div>
<transition
name="fade"
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@after-enter="handleAfterEnter"
>
<div v-if="show">transition标签</div>
</transition>
<button @click="handleClick">切换</button>
</div>
</template>
<script>
import Velocity from 'velocity-animate'
export default {
name:"Four",
data() {
return {
show:true
}
},
methods: {
handleClick:function(){
this.show = !this.show;
},
handleBeforeEnter:function(el){
//el指动画包裹的div标签
alert("handleBeforeEnter")
el.style.color = "red";
},
handleEnter:function(el,done){
// done回掉函数,当动画执行完成之后需要手动的调用done函数,相当于告诉vue此时动画已经执行完成。
// 当done函数调用完成之后,vue会触发另外一个函数即handleAfterEnter
// alert("handleEnter")
setTimeout(function(){
el.style.color = "green";
// done();
},2000)
setTimeout(function(){
done();
},4000)
},
handleAfterEnter:function(el){
alert("handleAfterEnter");
el.style.color = "red";
}
}
</script>
<style scoped></style>
在vue中使用js动画库velocity
安装
cnpm install velocity-animate@beta
引用
在需要使用的组件中引用
import Velocity from 'velocity-animate'
调用
在js动画的钩子函数中使用
<template>
<div>
<transition
name="fade"
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@after-enter="handleAfterEnter"
>
<div v-if="show">transition标签</div>
</transition>
<button @click="handleClick">切换</button>
</div>
</template>
<script>
import Velocity from 'velocity-animate'
export default {
name:"Four",
data() {
return {
show:true
}
},
methods: {
handleClick:function(){
this.show = !this.show;
},
handleBeforeEnter:function(el){
el.style.opacity = 0;
},
handleEnter:function(el,done){
Velocity(el,{opacity:1},{duration:1000,complete:done})
//让el元素的opacity缓慢的变成1,并耗时1s,当动画执行完毕之后complete对应的属性内容会被执行(即执行done函数)
},
handleAfterEnter:function(){
alert("动画结束")
}
},
}
</script>
<style scoped>
</style>