45 双组件切换动画效果

阐述

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

双组件切换动画

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

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

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

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

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

template: `  
    
        
        
    
    切换动画
`

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

    
    
    demo
    
        .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;
        }
    
    



    



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

    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: `  
            
                
            
            切换动画
        `
    })

    const vm = app.mount("#app")

动态组件切换效果

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

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

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

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

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

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

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