vue中使用js动画与velocity.js

一：vue中使用js动画

根据上一篇安装animate.css之后

vue中有动画的钩子函数，@before-enter是内容由无到有的时候自动监听触发的函数，函数会接收到参数el，这样可以动态设置样式。@enter是@before-enter触发结束后触发。

@enter不同的是会接收到两个参数，参数一为元素el，参数二为done（回调函数）；done函数执行完就会触发@after-enter函数。

出场动画钩子函数@before-leave、@leave、@after-leave同理

<!--vue中使用js动画-->
<transition name='fade' @before-enter='handlebeforeEnter' @enter='handleEnter' @after-enter='handleafterEnter'>
	<p v-show='jsshow'>js动画</p>
</transition>
<button @click="handlejsClick">切换js动画</button>

<script>
	export default{
		data(){
			return {

			}
		},
		methods:{
			handlebeforeEnter(el){
				el.style.color='red'
			},
			handleEnter(el,done){
				setTimeout(()=>{
					el.style.color='green';
				},2000);
				setTimeout(()=>{
					//这里的done回调函数也比较重要，done函数触发完又会触发@after-ender
					done();
				},4000)
			},
			handleafterEnter(el){
				el.style.color='#535353'
			}
		},
	}
</script>

二：vue中使用velocity.js

1.首先安装velocity.js

npm install velocity-animate --save-dev

2.在main.js中引入

import Velocity from 'velocity-animate'

3.原理跟上面一样，只是函数的变化方法不一样，这里的 complete: done跟上面的回调函数同理，一定要写，不然不会触发handleafterEnter函数

<template>
    <div>
        <transition name='fade' @before-enter='handlebeforeEnter' @enter='handleEnter' @after-enter='handleafterEnter'>
            <p v-show='jsshow'>js动画</p>
        </transition>
        <button @click="handlejsClick">切换js动画</button>
    </div>
</template>

<script>
    export default{
        data(){
            return {
                jsshow:true
            }
        },
        methods:{
            handlejsClick(){
                this.jsshow=!this.jsshow;
            },
            handlebeforeEnter(el){
                el.style.opacity=0
            },
            handleEnter(el,done){
                console.log("before结束了执行了enter")
                Velocity(el,{opacity:1},{duration:3000,complete: done})
            },
            handleafterEnter(el){
                el.style.color='red'
            }
        },
    }
</script>