05.vue中js动画与Velocity.js的结合

vue中js动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue中js动画</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="root">
        <transition 
            name="fade"
            @before-enter="handleBeforeEnter"
            @enter="handleEnter"
            @after-enter="handleAfterEnte"
            @before-leave="handleBeforeEnter"
            @leave="handleEnter"
            @after-leave="handleAfterEnte"
        >
            <div v-show="show">Hello World</div>
        </transition>
        <button @click="handleClick">toggle</button>
    </div>
</body>
<script>
    // js动画的钩子函数
    // 入场动画对应的钩子函数enter 
    // 1.@before-enter 即将显示之前触发的函数。可以设置字体变红。
    // 2.执行所有动画@enter，手动调用回调函数。告诉vue动画已经执行完了。
    // 3.@after-enter动画结束后执行的函数。

    // 出场动画对应的钩子函数leave 
    // @before-leave="handleBeforeEnter"
    // @leave="handleEnter"
    // @after-leave="handleAfterEnte"

    var vm = new Vue({
        el:"#root",
        data:{
            show:true
        },
        methods:{
            handleClick:function(){
                this.show = !this.show; 
            },
            handleBeforeEnter:function(el){
                el.style.color = 'red';
                console.log('before-enter');
            },
            handleEnter:function(el,done){  // 2个参数
                // 所有的动画,2s后执行。
                setTimeout(()=>{
                    el.style.color = 'green'
                    // done(); // 手动调用回调函数。告诉vue动画已经执行完了。
                },2000);

                setTimeout(()=>{
                    done();  // 4s后结束动画。
                },4000);  
            },
            handleAfterEnte:function(el){
                el.style.color = '#000';  // 红色-》绿色-》黑色
            }
        }

    })
</script>
</html>

js的常用动画库Velocity.js

Velocity.js 英文官网：http://velocityjs.org/

Velocity.js 中文文://www.mrfront.com/docs/velocity.js/index.html

<script src="https://cdn.jsdelivr.net/npm/[email protected]/velocity.min.js"></script>

05.vue中js动画与Velocity.js的结合

vue中js动画

js的常用动画库Velocity.js

猜你喜欢