Vue中动画与velocity.js

最新推荐文章于 2024-06-26 18:41:13 发布

要不要吃烤肉

最新推荐文章于 2024-06-26 18:41:13 发布

阅读量226

点赞数

分类专栏：前端学习文章标签： vue js

本文链接：https://blog.csdn.net/Smart_J_King/article/details/108676969

版权

前端学习专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue中动画与velocity.js</title>
    <script src="./vue.js"></script>
    <script src="./velocity.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- 注意没有@after-leave -->
        <transition 
            name="myfade"
            @before-enter="handleBeforeEnter"
            @enter="handleEnter"
            @after-enter="handleAfterEnter"
            @before-leave="handleBeforeLeave"
            @leave="handleLeave"
        >
            <div v-show="show">Vue中动画与velocity.js</div>
        </transition>
        <button @click="handleBtnClick">切换</button>
    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                show: true
            },
            methods: {
                handleBtnClick: function() {
                    this.show = !this.show;
                },
                handleBeforeEnter: function(el) {
                    // el指的是动画<transition>包裹的标签
                    // 自己写的js动画
                    // el.style.color = "red";

                    el.style.opacity = 0;
                },
                handleEnter: function(el, done) {
                    // 自己写的js动画
                    // setTimeout(()=> {
                    //     el.style.color = "green"
                    // }, 3000)
                    // setTimeout(()=> {
                    //     done()
                    // },5000)
                    
                    // 使用Velocity.js
                    Velocity(el, {
                        opacity: 1
                    }, {
                        duration: 1000,
                        complete: done
                    })
                },
                handleAfterEnter: function(el) {
                    // 自己写的js动画
                    el.style.color = "black"
                    console.log("Enter Finish!")
                },
                handleBeforeLeave: function(el) {
                    // 自己写的js动画
                    // el.style.color = "yellow"
                    el.style.opacity = 1;
                    el.style.color = "green"
                },
                handleLeave: function(el, done) {
                    // 自己写的js动画
                    // setTimeout(()=> {
                    //     el.style.color = "pink"
                    // }, 3000)
                    // setTimeout(()=> {
                    //     done()
                    // },5000)

                    // 使用Velocity.js
                    Velocity(el, {
                        opacity: 0
                    }, {
                        duration: 3000,
                        complete: done
                    })
                }
            }
        })
    </script>
</body>
</html>