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>
            .v-enter,
            .v-leave-to {
                opacity: 0;
            }

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

    <body>
        <div id="root">
            <transition mode="out-in">
                <div v-if="show" key="name">Harold</div>
                <div v-else key="hello">Hello</div>
            </transition>
            <button @click="handleClick">toggle</button>
            <transition mode="out-in">
                <child v-if="show"></child>
                <child-one v-else></child-one>
            </transition>
            <hr />
            <transition mode="in-out">
                <component :is="type"></component>
            </transition>
        </div>
        <script type="text/javascript">
            Vue.component('child', {
                template: '<div>child</div>'
            })
            Vue.component('child-one', {
                template: '<div>child-one</div>'
            })

            var rm = new Vue({
                el: '#root',
                data: {
                    show: true,
                    type: 'child',
                },
                methods: {
                    handleClick() {
                        this.show = !this.show;
                        this.type = this.type === 'child' ? 'child-one' : 'child';
                    }
                }
            })
        </script>
    </body>

</html>

 

posted @ 2019-10-31 16:27  嘆世殘者——華帥  阅读(200)  评论(0)  编辑  收藏  举报