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>
这时候到浏览器中查看效果,仍然可以得到我们想要的效果。
这里为了方便你学习,我给出所有代码。
<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>
这节我们学习了两个组件间切换时的过渡效果制作,希望对你有所帮助。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 45. [动画]vue3双组件切换动画的实现
码云笔记 » 45. [动画]vue3双组件切换动画的实现