45. [动画]vue3双组件切换动画的实现

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

双组件切换动画

新建Demo45.html文件,复制上节的代码,到这个文件中,然后进行改写。

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

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>

`

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

动态组件切换效果

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

先声明一个数据项,叫做component

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

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

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

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

<transition mode="out-in" appear>
    <component :is="component" />
</transition>

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

vue3 双组件切换动画的实现

这里为了方便你学习,我给出所有代码。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mybj</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>

这节我们学习了两个组件间切换时的过渡效果制作,希望对你有所帮助。

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 45. [动画]vue3双组件切换动画的实现

发表回复