45 双组件切换动画效果

ゝ一世哀愁。 2023-10-06 20:43 14阅读 0赞

#### \[动画\] vue3双组件切换动画的实现 ####

*  阐述
 *  双组件切换动画
 *  动态组件切换效果

## 阐述 ##

上节学习了双DOM元素动画过渡效果的实现，这节我们把DOM元素换成组件，看看编写方法上有什么变化。

## 双组件切换动画 ##

我们先来编写两个组件，这里可以写两个最简单的局部组件。

const XiaoHong = {
        
        template: `<div>小红进入了试衣间</div>`
    }
    const XiaoLi = {
        
        template: `<div>小丽进入了试衣间</div>`
    }

要想使用局部组件，需要先用 `components` 进行注册，这里换成小写加横线的形式。

components: {
        
        'xiao-hong': XiaoHong,
        'xiao-li': XiaoLi
    },

然后修改模板中的 `<transition>` 部分，使用局部组件，实现动画。

template: `  
        <transition mode="out-in" appear>
            <xiao-hong v-if="isShow" />
            <xiao-li v-else />
        </transition>
        <button @click="hanldClick">切换动画</button>
    `

写完这些，到浏览器中查看一下，可以看到动画效果也是可以成功的。

![在这里插入图片描述][0d508fa045584fd685183644bcc9f45d.gif_pic_center]

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>demo</title>
        <style>
            .v-enter-from,
            .v-leave-to {
          
                opacity: 0;
            }
    
            .v-enter-to,
            .v-leave-from {
          
                opacity: 1;
            }
    
            .v-enter-active,
            .v-leave-active {
          
                transition: opacity 2s ease-in;
            }
        </style>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
    </head>
    
    <body>
        <div id="app"></div>
    </body>
    <script>
    
        const XiaoHong = {
          
            template: `<div>小红进入了试衣间</div>`
        }
        
        const XiaoLi = {
          
            template: `<div>小丽进入了试衣间</div>`
        }
    
        const app = Vue.createApp({
          
            data(){
          
                return {
          
                    component:'xiao-hong'
                }
            },
            methods:{
          
                hanldClick(){
          
                    this.component = this.component === 'xiao-hong' ? 'xiao-li' : 'xiao-hong'
                }
            },
            components: {
           
                'xiao-hong': XiaoHong, 
                'xiao-li': XiaoLi 
            },
            template: `  
                <transition mode="out-in" appear>
                    <component :is="component" />
                </transition>
                <button @click="hanldClick">切换动画</button>
            `
        })
    
        const vm = app.mount("#app")
    </script>
    </html>

## 动态组件切换效果 ##

我们还可以使用动态组件的形式进行切换，也就是在业务逻辑层面修改绑定属性，然后在模板中用 `:is` 来进行绑定。

先声明一个数据项，叫做 `component`。

data() {
        
        return {
        
            component: 'xiao-hong'
        }
    },

然后在 `handleClick` 方法里修改这个组件的绑定，这里可以使用一个三元运算符。

methods: {
        
        hanldClick() {
        
            this.component = this.component === 'xiao-hong'?'xiao-li':'xiao-hong'
        }
    },

最后修改模板中的绑定方式。

这时候到浏览器中查看效果，仍然可以得到我们想要的效果。

[0d508fa045584fd685183644bcc9f45d.gif_pic_center]: https://img-blog.csdnimg.cn/0d508fa045584fd685183644bcc9f45d.gif#pic_center