码云 45. [动画]vue3双组件切换动画的实现
AI 概述
上节学习了双 DOM 元素动画过渡效果的实现，这节我们把 DOM 元素换成组件，看看编写方法上有什么变化。
双组件切换动画
新建Demo45.html文件，复制上节的代码，到这个文件中，然后进行改写。
我们先来编写两个组件，这里可以写两个最简单的局部组件。
const XiaoHong = {
template: `<div>小红进入了试衣间&l...
上节学习了双 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双组件切换动画的实现的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。
微信
支付宝声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 45. [动画]vue3双组件切换动画的实现
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 45. [动画]vue3双组件切换动画的实现
