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 worlddiv> transition> <button @click='handleClick'>togglebutton> 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 worlddiv> transition> <button @click='handleClick'>togglebutton> 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 worlddiv> transition> <button @click='handleClick'>togglebutton> 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 worlddiv>
transition>
<button @click='handleClick'>togglebutton>
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动画执行完了，可以执行下一个钩子函数。