前期准备

先写一个最简单的点击出现消失的效果:

<body>
	<dir id="root">
		<transition name="fade">
			<div v-show="show">hello Vue.js</div>
		</transition>
		<button @click="handleclick">toggle</button>
	</dir>

	<script type="text/javascript">
		var vm = new Vue({
			el:"#root",
			data:{
				show:true
			},
			methods:{
				handleclick:function(){
					this.show=!this.show
				}
			}
		})
	</script>
</body>

纯JS动画

在Vue中，内置了很多钩子函数，动画效果也不例外，通过下面几种JS动画钩子函数，可以设定具体到每一步的动画。

before-enter
enter
after-enter
before-leave
leave
after-leave

before-enter

动画进行之前执行

我们让<transition>监听before-enter钩子函数：

<transition name="fade" @before-enter="handlebefore" >
	<div v-show="show">hello Vue.js</div>
</transition>

在实例中定义响应方法：

methods:{
	handleclick:function(){
		this.show=!this.show
	},
	handlebefore:function(el){ 
		el.style.color='pink'
	}
}

上面的el指的是<transition>包裹的<div>标签。

效果：在显示之前时刻，字体颜色改变，点击显示时已变成粉色

回调函数done()

如果你使用css中“过渡”或者 “动画”时，vue能自动识别如何结束。

CSS transition 和 animation 都设置了执行时间（duration），vue能识别，并自动结束动画效果。

但是，如果你只使用js的话（没有任何css），vue 是无法判断动画该执行多长时间，何时结束，因为你没有给vue一个准确的执行时间。这个时候，就需要 done() 来通知 vue：动画到这已经结束，你可以继续执行下一步了。

所以，如果在enter钩子函数中没有回调函数，钩子 after-enter 就不执行了,从运行效果来看，没有done的话，那么动画就完成了（维持在 enter 钩子状态），后面的钩子也就不执行了

enter

在before-enter结束后，触发enter钩子函数，所以动画都写在enter内。

监听动画钩子函数：

<transition name="fade"
@before-enter="handlebefore"
@enter="handleenter">
	<div v-show="show">hello Vue.js</div>
</transition>

实例中添加的方法：

handleenter:function(el,done){
    setTimeout(() => {
        el.style.color='red'
        done()   /*回调函数*/
    },2000)
}

这里部分在enter钩子生效时执行，作用是两秒后将包裹<div>的color属性值变成 "red"，并手动在函数中添加回调函数done()

after-enter

作用于enter钩子执行结束后。

<transition name="fade"
@before-enter="handlebefore"
@enter="handleenter"
@after-enter="handleafter" >
	<div v-show="show">hello Vue.js</div>
</transition>

实例中新增方法：

handleafter:function(el){
	el.style.color='black'
}

可以实现在enter钩子结束后（也就是done函数调用后），执行将颜色变黑的操作。

其余三种消失钩子，同理可得

了解Velocity.js库

一个简单易用的高性能JS 动画库，官网下载并保存即可

引入

<head>标签中放入 <script src="Velocity.js"></script>

一个使用的例子

在上面JS动画的代码中

将事件handlebefore内执行语句改为:

handlebefore:function(el){
	el.style.opacity = 0
}

将handleenter事件修改为：

handleenter:function(el,done){
    Velocity(el,{opacity:1},
        {duration:2000 , 
         compete:done})
}

意思是传递参数el,透明度为，持续时间为2s，并且要在最后一个配置项中添加compete:done，因为在执行完动画后，compete会被自动执行，告诉动画执行完毕。

Vue之JS动画与Velocity.js的结合