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-if="show" key="hello">Hello World</div>
                <div v-else key="bye">Bye 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
                    },
                }
            })
        </script>
    </body>
</html>

transition 标签上设置一个参数

mode="in-out"

然后点击就可以看到'Bye World' 先出来，然后 'Hello World' 再消失的效果。然后点击就可以看到，'Hello World' 先出来，然后 'Bye World' 再消失的效果...

mode="out-in"

效果则相反。

多个组件过渡动画

<!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 mode="out-in">
                <child v-if="show" key="hello"></child>
                <child-one v-else key="bye"></child-one>
            </transition>
            <button @click="handleClick">切换</button>
        </div>
        
        <script>
            Vue.component('child', {
                template: '<div>child</div>',
            })
            
            Vue.component('child-one', {
                template: '<div>child-one</div>',
            })
            
            var vm = new Vue({
                el: '#app', 
                data: {
                    show: true,
                },
                methods: {
                    handleClick: 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>
        <style>
            .v-enter, .v-leave-to {
                opacity: 0;
            }
            .v-enter-active, .v-leave-active {
                transition: opacity 1s;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <transition mode="out-in">
                <component :is="type"></component>
            </transition>
            <button @click="handleClick">切换</button>
        </div>
        
        <script>
            Vue.component('child', {
                template: '<div>child</div>',
            })
            
            Vue.component('child-one', {
                template: '<div>child-one</div>',
            })
            
            var vm = new Vue({
                el: '#app', 
                data: {
                    type: 'child',
                },
                methods: {
                    handleClick: function() {
                        this.type = this.type === 'child' ? 'child-one' : 'child'
                    },
                }
            })
        </script>
    </body>
</html>