JS动画

在此前我们使用了CSS来实现动画的效果，同样的，动画效果也可以用JS来实现

我们使用与之前相同的点击代码来完成JS动画的学习

动画钩子名称

与生命周期钩子相同，Vue当中对于动画也声明了相关的钩子，通过这些钩子来编写函数即可完成动画效果

显示：

进入动画开始前：before-enter
进入动画开始：enter
进入动画结束：after-enter

消失：

消失动画开始前：before-leave
消失动画开始：leave
消失动画结束after-leave

动画钩子使用

我们需要给对应的transition标签绑定对应的钩子，并给函数起名，在vue实例中的methods对对应时间节点的函数进行声明即可

注意：

每个钩子对应的函数都会传入一个参数el，他对应的值为我们所添加动画效果的DOM盒子内容
leave和enter钩子对应的函数传入的参数还有一个done，这是一个回调函数，当我们执行完对应函数里的内容后，需要手动调用一次这个函数，相当于告诉vue我的动画已经执行完毕

完整代码

<div id="root">
	<transition 
	name="fade"
	@before-enter="handleBeforeEnter"
	@enter="handleEnter"
	@after-enter="handkeAfterEnter"
	@before-leave="handleBeforeLeave"
	@leave="handleLeave"
	@after-leave="handleAfterLeave">
		<div v-show="show"> 皮卡皮卡皮卡丘</div>
	</transition>
	<button @click="handleClick">点点我</button>
</div>

<script type="text/javascript">
	var vm = new Vue({
		el:'#root',
		data:{
			show:true
		},
		methods:{
			handleClick:function(){
				this.show = ! this.show
			},
			handleBeforeEnter:function(el){
				el.style.opacity='1'
				el.style.color='red'
			},
			handleEnter:function(el,done){//done回调函数
				setTimeout(()=>{
					el.style.color='green'
				},2000)
					setTimeout(()=>{
					done()
				},4000)
			},
			handkeAfterEnter:function(el){
				el.style.color='black'
			},
			handleBeforeLeave:function(el){
				el.style.opacity='1'
			},
			handleLeave:function(el,done){
				setTimeout(()=>{
					el.style.opacity='0.5'
				},2000)

				setTimeout(()=>{
					done()
				},2500)
			},
			handleAfterLeave:function(el){
				el.style.opacity='0'
			}
		}
	})
</script>

velocity.js动画库

velocity.js库的引入

与animate.css库一样，我们首先需要在<head>标签内引入这个库

<script type="text/javascript" src="velocity.js"></script>

velocity.js库的使用

我们在leave与enter钩子的对应函数内对velocity.js库内的内容进行调用

Velocity(el,{需要完成的动画效果},{duration:需要完成动画所需的时间,complete:done动画结束后的信号})

具体使用的代码：

handleBeforeEnter:function(el){
	el.style.opacity='0'
},
handleEnter:function(el,done){
	Velocity(el , { opacity : 1 } , { duration:1000 , complete:done })
},
handkeAfterEnter:function(el){
	console.log("动画结束")
},

注意： Velocity函数调用时首字母V要大写

Vue---JS动画与Velocity.js结合