Vue中JS动画和velocity.js

<div id="app">
        <button @click="show = !show">Click</button>
        <transition
            @before-enter="handleBeforeEnter"
            @enter="handleEnter"
            @after-enter="handleAfterEnter"
        >
            <div v-show="show">Some text here🤣🤣</div>
        </transition>
    </div>

<script>
        var vm = new Vue({
            el: '#app',
            data: {
                show: false
            },
            methods: {
                // el就是transition包裹的这个标签
                handleBeforeEnter(el) {
                    console.log('before enter');
                },
                // el就是transition包裹的标签,done是进入动画结束以后的回调函数
                handleEnter(el, done) {
                    setTimeout(() => {
                        el.style.color = 'blue'
                    }, 2000)

                    setTimeout(() => {
                        done()
                    }, 4000)
                },
                handleAfterEnter(el) {
                    el.style.color = 'purple'
                }
            }
        })
    </script>

我们引入volocity的cdn文件以后，可以这样简单使用它完成一个动画：