Vue 动画的封装 - 木子才的博客

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="./vue.v2.6.10.dev.js"></script>
        <style>
            .v-enter, .v-leave-to {
                opacity: 0;
            }
            .v-enter-active, .v-leave-active {
                transition: opacity 1s;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <transition>
                <div v-show="show">hello world</div>
            </transition>
            <button @click="handleBtnClick">切换</button>
        </div>
        
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    show: true,
                },
                methods: {
                    handleBtnClick: function() {
                        this.show = !this.show
                    }
                }
            })
        </script>
    </body>
</html>

封装成组件：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="./vue.v2.6.10.dev.js"></script>
    </head>
    <body>
        <div id="app">
            <fade :show="show">
                <div>hello world</div>
            </fade>
            <button @click="handleBtnClick">切换</button>
        </div>
        
        <script>
            Vue.component('fade', {
                props: ['show'],
                template: `
                    <transition
                     @before-enter="handleBeforeEnter"
                     @enter="handleEnter">
                        <slot v-if="show"></slot>
                    </transition>
                `,
                methods: {
                    handleBeforeEnter: function(el) {
                        el.style.color = 'red'
                    },
                    handleEnter: function(el, done) {
                        setTimeout(() => {
                            el.style.color = 'green'
                            done()
                        }, 2000)
                    }
                }
            })
            
            var vm = new Vue({
                el: '#app',
                data: {
                    show: true,
                },
                methods: {
                    handleBtnClick: function() {
                        this.show = !this.show
                    }
                }
            })
        </script>
    </body>
</html>