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

Posted 2021-01-22 c-x-m

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 
    // [email protected]enter 即将显示之前触发的函数。可以设置字体变红。
    // 2.执行所有动画@enter，手动调用回调函数。告诉vue动画已经执行完了。
    // [email protected]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>

使用Velocity.js动画库

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js常用动画库Velocity.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./js/velocity.min.js"></script>
</head>
<body>
    <div id="root">
        <transition 
            name="fade"
            @before-enter="handleBeforeEnter"
            @enter="handleEnter"
            @after-enter="handleAfterEnte"
        >
            <div v-show="show">Hello World</div>
        </transition>
        <button @click="handleClick">toggle</button>
    </div>
</body>
<script>
    // js动画的钩子函数
    // 入场动画对应的钩子函数enter 
    // [email protected]enter 即将显示之前触发的函数。可以设置字体变红。
    // 2.执行所有动画@enter，手动调用回调函数。告诉vue动画已经执行完了。
    // [email protected]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.opacity = 0;
            },
            handleEnter:function(el,done){ 
                // 动画从0到1，耗时3s的时间。
                // 动画执行完毕后，complete这个属性对应的内容会自动执行。（比如调用回调函数。）
                Velocity(el,{opacity:1},{
                            duration:3000, 
                            complete:done
                        }
                    );
            },
            handleAfterEnte:function(el){
                console.log("动画结束");
            }
        }

    })
</script>
</html>

以上是关于05.vue中js动画与Velocity.js的结合的主要内容，如果未能解决你的问题，请参考以下文章

利用velocity.js将svg动起来

使用 Velocity.js 从 URL 渲染 SVG 动画

如何在悬停中使用velocity.js？

动画高度到自动存储高度 - 使用velocity.js的slideUp

为 CSS/JS/jQuery 动画使用 Velocity.js 或 Transit.js？

如何在悬停中使用velocity.js？