Vue中的JS动画与velocity.js结合
以前都是通过CSS实现动画效果,在Vue里可以用JS实现动画。
在Vue里用JS实现动画需要在transition标签的 attribute 中声明 JavaScript 钩子
第一个动画钩子：@before-enter
<div id='app'> <transition @before-enter='handleBeforeEnter' > <div v-if='show'>hello world</div> </transition> <button @click='handleClick'>toggle</button> </div> <script> var vm = new Vue({ el:'#app', data:{ show:true }, methods:{ handleClick:function(){ this.show = !this.show; }, handleBeforeEnter:function(el){ el.style.color='red' } } }) </script>
页面上，从点击“隐藏 到 显示”，即将显示的那一瞬间（即进入动画前）颜色变为红色。
handleBeforeEnter实际上会接收一个参数el 这个el指的就是transition包裹的东西
第二个动画钩子：@enter
<div id='app'> <transition @before-enter='handleBeforeEnter' @enter='handleEnter' > <div v-if='show'>hello world</div> </transition> <button @click='handleClick'>toggle</button> </div> <script> var vm = new Vue({ el:'#app', data:{ show:true }, methods:{ handleClick:function(){ this.show = !this.show; }, handleBeforeEnter:function(el){ el.style.color='red' }, handleEnter:function(el,done){ setTimeout(function(){ el.style.color='green'; done(); },2000); } } }) </script>
在执行动画的时候，会触发@enter这个事件，将颜色从红色变为绿色。handleEnter比handleBeforeEnter多一个参数done。done是回调函数，在执行完后，可以回调一下done()，告诉vue动画执行完了，可以执行下一个钩子函数。
第三个动画钩子：@after-enter
<div id='app'> <transition @before-enter='handleBeforeEnter' @enter='handleEnter' @after-enter='handleAfterEnter' > <div v-if='show'>hello world</div> </transition> <button @click='handleClick'>toggle</button> </div> <script> var vm = new Vue({ el:'#app', data:{ show:true }, methods:{ handleClick:function(){ this.show = !this.show; }, handleBeforeEnter:function(el){ el.style.color='red' }, handleEnter:function(el,done){ setTimeout(function(){ el.style.color='green'; },2000); setTimeout(function(){ done(); },4000) }, handleAfterEnter:function(el){ el.style.color='black' } } }) </script>
动画结束之后，把颜色变为黑色
以上三个钩子before-enter、enter和after-enter都是入场动画，有入场动画就有出场动画分别是before-leave,leave,after-leave。使用出场动画与入场动画类似，在此不做介绍。
使用 Velocity.js
Velocity.js 是 JS常用的动画库，velocity的官网：http://velocityjs.org/
一个使用 Velocity.js 的简单例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <script src="../vue.js"></script> <script src="../velocity.js"></script> </head> <body> <div id='app'> <transition @before-enter='handleBeforeEnter' @enter='handleEnter' @after-enter='handleAfterEnter' > <div v-if='show'>hello world</div> </transition> <button @click='handleClick'>toggle</button> </div> <script> var vm = new Vue({ el:'#app', 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> </html>
Velocity 提供了丰富的可选配置项，可以更好的控制动画，也可以利用这些配置做出炫酷复杂的动画特效。
Velocity 的动画执行时间以毫秒为单位。
complete为动画结束时的回调函数,回调一下done，告诉vue动画执行完了，可以执行下一个钩子函数。
