在vue项目中使用js动画库velocity

在vue项目中使用js动画库velocity

在vue中通过js实现动画

在vue中通过js实现动画使用的是vue提供的动画钩子函数。

1. before-enter：入场动画还未开始执行时
2. enter：入场动画开始执行
3. after-enter：入场动画执行结束
4. before-leave：出场动画还未开始执行时
5. enter：出场动画开始执行
6. after-leave：出场动画执行结束

<template>
    <div>
        <transition
            name="fade"
            @before-enter="handleBeforeEnter"
            @enter="handleEnter"
            @after-enter="handleAfterEnter"
        >
            <div v-if="show">transition标签</div>
        </transition>
        <button @click="handleClick">切换</button>
    </div>
</template>
<script>
import Velocity from 'velocity-animate'
export default {
    name:"Four",
    data() {
        return {
            show:true
        }
    },
    methods: {
        handleClick:function(){
            this.show = !this.show;
        },
        handleBeforeEnter:function(el){
            //el指动画包裹的div标签
            alert("handleBeforeEnter")
            el.style.color = "red";
        },
        handleEnter:function(el,done){
            // done回掉函数，当动画执行完成之后需要手动的调用done函数，相当于告诉vue此时动画已经执行完成。
            // 当done函数调用完成之后，vue会触发另外一个函数即handleAfterEnter
            // alert("handleEnter")
            setTimeout(function(){
                el.style.color = "green";
                // done();
            },2000)
            setTimeout(function(){
                done();
            },4000)
        },
        handleAfterEnter:function(el){
            alert("handleAfterEnter");
            el.style.color = "red";
        }
}
</script>
<style scoped></style>

在vue中使用js动画库velocity

安装

cnpm install velocity-animate@beta

引用

在需要使用的组件中引用

import Velocity from 'velocity-animate'

调用

在js动画的钩子函数中使用

<template>
    <div>
        <transition
            name="fade"
            @before-enter="handleBeforeEnter"
            @enter="handleEnter"
            @after-enter="handleAfterEnter"
        >
            <div v-if="show">transition标签</div>
        </transition>
        <button @click="handleClick">切换</button>
    </div>
</template>
<script>
import Velocity from 'velocity-animate'
export default {
    name:"Four",
    data() {
        return {
            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})
            //让el元素的opacity缓慢的变成1,并耗时1s,当动画执行完毕之后complete对应的属性内容会被执行(即执行done函数)
        },
        handleAfterEnter:function(){
            alert("动画结束")
        }
    },
}
</script>
<style scoped>
</style>