Vue中的Js动画与Velocity.js的结合
在上一节中学习了通过CSS来实现动画的效果，其实通过js也可以实现动画效果。
<body>
<div id="root">
<transition
name="fade"
@before-enter="handleBeforeEnter"
>
<div v-show="show">Hello World</div>
</transition>
<button @click="handleClick">toggle</button>
</div>
<script>
var vm = new Vue({
el:"#root",
data:{
show:true
},
methods:{
handleClick:function(){
this show = !this.show
},
handleBeforeEnter:function(){
console.log('beforeEnter')
}
}
})
</script>
</body>
动画钩子before-enter
在transition标签内绑定一个before-enter事件，在methods函数内将事件的函数定义好。
这样打开页面，查看控制台。在打开页面的一瞬间，控制台会打印出beforeEnter的字样。这样可以看出代码是无误可用的。
实际上handleBeforeEnter还可以接受一个参数“el”，这个el实际就是标签transition包裹着的div标签。
我们将console.log('beforeEnter')改成el.style.color = 'red'，即函数变为：
handleBeforeEnter:function(el){
el.style.color = 'red'
这样，页面上会显示红色的Hello World。
动画钩子enter
和before-enter一样，在transition内也绑定enter事件，然后再methods内定义handleEnter函数，这个函数有两个参数el,done。el还是transition标签内的div内容，done是回调函数。在函数内设置2秒后将字体变为绿色，然后调用回调函数通知Vue这个函数执行结束。
动画钩子after-enter
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<transition
name="fade"
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@after-enter="handleAfterEnter"
>
<div v-show="show">Hello World</div>
</transition>
<button @click="handleClick">toggle</button>
</div>
<script>
var vm = new Vue({
el:"#root",
data:{
show:true
},
methods:{
handleClick:function(){
this.show = !this.show
},
handleBeforeEnter:function(el){
el.style.color = 'red'
},
handleEnter:function(el,done){
setTimeout(() =>{
el.style.color = 'green'
},2000)
setTimeout(() =>{
done()
},4000)
},
handleAfterEnter:function(el){
el.style.color = "#000"
}
}
})
</script>
</body>
和上两个事件一样，在transition内绑定事件后，在methods内定义事件。在这个事件，我把字体的颜色重新定义成了黑色。为了再变成绿色之后不让它立马变成黑色，隔两秒后才变成黑色，我在handleEnter内把回调函数done重新定义，在4秒后结束。
这样就可以看到整个过程是一开始字体是红色，两秒后变成绿色，再两秒后变成黑色。
上面是入场动画；相应的，还会有出场动画。
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<transition
name="fade"
@before-leave="handleBeforeEnter"
@leave="handleEnter"
@after-leave="handleAfterEnter"
>
<div v-show="show">Hello World</div>
</transition>
<button @click="handleClick">toggle</button>
</div>
<script>
var vm = new Vue({
el:"#root",
data:{
show:true
},
methods:{
handleClick:function(){
this.show = !this.show
},
handleBeforeEnter:function(el){
el.style.color = 'red'
},
handleEnter:function(el,done){
setTimeout(() =>{
el.style.color = 'green'
},2000)
setTimeout(() =>{
done()
},4000)
},
handleAfterEnter:function(el){
el.style.color = "#000"
}
}
})
</script>
</body>
用法上和入场动画一样只是事件的名字分别是“before-enter”，“leave”，“after-leave”，所显现的动画和入场一样，只是最后完成后，出场动画是其中的内容会消失。
现在介绍下js常用的动画库—Velocity.js，从官网上下载后，用script引入代码中，现在就可以通过velocity来实现动画。
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./vue.js"></script>
<script src="./velocity.js"></script>
</head>
<body>
<div id="root">
<transition
name="fade"
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@after-enter="handleAfterEnter"
>
<div v-show="show">Hello World</div>
</transition>
<button @click="handleClick">toggle</button>
</div>
<script>
var vm = new Vue({
el:"#root",
data:{
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})
},
handleAfterEnter:function(el){
console.log("动画结束")
}
}
})
</script>
</body>
整个过程是：刚开始时执行handleBeforeEnter，内容不显示，即透明度是0；然后执行handleEnter用velocity实现动画：1秒内完成透明度从0到1的转变，complete属性对应的内容即done会被自动执行，告诉Vue动画执行完成，接下来就执行handleAfterEnter，打开页面的控制台，执行到这一步的时候，会打印出“动画结束”的字样。
