Vue Velocity.js 实现动画 - 木子才的博客

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="./vue.v2.6.10.dev.js"></script>
        <link rel="stylesheet" type="text/css" href="./animate.v3.7.0.css"/>
    </head>
    <body>
        <div id="app">
            <transition name="fade"
             @before-enter="handleBeforeEnter"
             @enter="handleEnter"
             @after-enter="handleAfterEnter">
                <div v-if="show">Hello World</div>
            </transition>
            <button @click="handleClick">切换</button>
        </div>
        
        <script>
            var vm = new Vue({
                el: '#app', 
                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()
                        }, 4000)
                    },
                    handleAfterEnter: function(el) {
                        el.style.color = '#000'
                    }
                }
            })
        </script>
    </body>
</html>

JS 的钩子

before-enter
enter
after-enter

before-leave
leave
after-leave

before-enter、after-enter 都会接收一个参数：el。
而 enter 则会接收两个参数：el、done，执行 done() 则表示动画接触会触发 after-enter。

Velocity.js

使用第三方库来实现 JS 动画：Velocity.js

引入：

<script src="./velocity.min.js"></script>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="./vue.v2.6.10.dev.js"></script>
        <script src="./velocity.min.js"></script>
    </head>
    <body>
        <div id="app">
            <transition name="fade"
             @before-enter="handleBeforeEnter"
             @enter="handleEnter"
             @after-enter="handleAfterEnter">
                <div v-if="show">Hello World</div>
            </transition>
            <button @click="handleClick">切换</button>
        </div>
        
        <script>
            var vm = new Vue({
                el: '#app', 
                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>
</html>