Vue学习笔记5.5 多个元素/组件过渡动画--看注释就好没啥难度

我就是我 2022-03-20 13:48 156阅读 0赞

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Vue多个元素或组件过渡动画</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="vue.js"></script>
        <style>
            .v-enter,
            .v-leave-to {
                opacity: 0;
            }
            
            .v-enter-to,
            .v-leave-to {
                transition: opacity 1s;
            }
        </style>
    </head>
    
    <body>
        <div id="app">
            <transition mode="out-in">
            
                
            
                
            
                <conponent :is="show"></conponent>
            </transition>
            <button @click="handleClick">切换</button>
        </div>
    </body>
    <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
                show: 'child'
            },
            methods: {
                handleClick: function() {
                    // this.show = this.show ? false : true
                    this.show = this.show === 'child' ? 'child-one' : 'child'
                }
            }
        })
    </script>
    
    </html>