Vue动画的封装

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Vue动画的封装</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <style type="text/css">
            .fade1-enter,
            .fade1-leave-to {
                opacity: 0;
            }

            .fade1-enter-active,
            .fade1-leave-active {
                transition: opacity 1s;
            }
        </style>
    </head>

    <body>
        <div id="root">
            <fade1 :show="show">
                <div>fade1</div>
            </fade1>
            <button @click="handleBtnClick">toggle</button>
            <fade2 :show="show">
                <div>fade2</div>
            </fade2>
        </div>
        <script type="text/javascript">
            Vue.component('fade1', {
                props: ['show'],
                template: `
                    <transition name="fade1">
                        <slot v-if="show"></slot>
                    </transition>
                `
            })

            Vue.component('fade2', {
                props: ['show'],
                template: `
                    <transition @before-enter="handleBeforeEnter" @enter="handleEnter">
                        <slot v-if="show"></slot>
                    </transition>
                `,
                methods: {
                    handleBeforeEnter(el) {
                        el.style.color = "red"
                    },
                    handleEnter(el, done) {
                        setTimeout(() => {
                            el.style.color = 'green'
                            done()
                        }, 2000)
                    }

                }
            })

            var rm = new Vue({
                el: '#root',
                data: {
                    show: false
                },
                methods: {
                    handleBtnClick() {
                        this.show = !this.show
                    }
                }
            })
        </script>
    </body>

</html>
猜你喜欢
