Vue动画之二: JS方式

2018-09-04  本文已影响0人  婷诗漾

在vue 项目中, 通过JS添加动画效果。
1、js 事件, 处理

<head>
<meta charset="UTF-8">
<title>vue 中的JS 动画 和 Velocity.js 的结合</title>
<script src = "vue.js"></script>
<script src = "velocity.min.js"></script>
<!-- 
    before-enter
    enter
    after-enter

    before-leave
    leave
    after-leave

    setTimeout(() => {})
    第一个括号之间必须没有空格
 -->
</head>
<body>
<div id = "myApp">

    <transition name = "fade"
        @before-enter = "handleBeforeEnter"
        @enter = "handleEnter"
        @after-enter = "handleAfterEnter"
    >

        <h2 v-show = "show">Welcome to Home! Christine. </h2>
    </transition>
    <button @click = "handleClick">toggle</button>
</div>
<script>
    
    new Vue({
        el : "#myApp",
        data : {
            show : true
        },
        methods : {
            handleClick : function () {
                this.show = !this.show;
            },

            handleBeforeEnter : function (el) {
                 el.style.color = "red"
            },
            handleEnter : function ( el , done ) {
                 setTimeout(() => {
                    el.style.color = "green"
                 }, 2000)

                setTimeout(() => {
                        done() 
                 }, 5000)
            },
            handleAfterEnter : function (el) {
                 el.style.color = "#000"
            }
        }
    })
</script>
</body>

2、Velocity.js 实现的

<head>
<meta charset="UTF-8">
<title>vue 中的JS 动画 和 Velocity.js 的结合</title>
<script src = "vue.js"></script>
<script src = "velocity.min.js"></script>

</head>
<body>
<div id = "myApp">

    <transition name = "fade"
        @before-enter = "handleBeforeEnter"
        @enter = "handleEnter"
        @after-enter = "handleAfterEnter"
    >
        <h2 v-show = "show">Welcome to Home! Christine. </h2>
    </transition>
    <button @click = "handleClick">toggle</button>
</div>
<script>
    
    new Vue({
        el : "#myApp",
        data : {
            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 
                })
            },
            handleAfterEnter : function (el) {
                console.log("动画结束")

            }
        }
    })
</script>
</body>
上一篇下一篇

猜你喜欢

热点阅读