码云 44. [动画]vue3双DOM元素动画的实现
本文学习的内容是双 DOM 元素的动画切换，意思就是一个动画<transtion>标签里有两个 DOM，然后一个出现时，另一个消失。
双元素交替切换效果制作
新建一个Demo44.html文件，复制前面我们写过的基础代码，然后在文件中加入一个新的<div>，修改 div 里边的文字。再用v-if和v-else控制显示和隐藏。这样就实现了双元素切换的效果。
下面是当前的代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mybj</title>
<style>
</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 app = Vue.createApp({
data(){
return {
isShow:false
}
},
methods:{
hanldClick(){
this.isShow = ! this.isShow
}
},
template: `
<transition>
<div v-if="isShow">小红进入了试衣间</div>
<div v-else>小丽进入了试衣间</div>
</transition>
<button @click="hanldClick">切换动画</button>
`
})
const vm = app.mount("#app")
</script>
这时在浏览器中打开页面，进行预览。可以看到已经有了基本的切换效果，只不过没有动画。
增加动画效果
现在用学过的知识，为这两个<div>增加基本的动画 CSS 效果。为了方便，我们就写一个透明度过渡就好。实现这个效果，都是我们学过的知识了，你可以跟着写，也可以先不看下面的文章，自己先写写看。练习一下。
你可以先写进入时的过渡样式。
<style>
.v-enter-from{
opacity: 0;
}
.v-enter-to {
opacity: 1;
}
.v-enter-active{
transition: opacity 2s ease-in;
}
</style>
有了进场的过多效果，直接加入出场的选择器就可以实现同时拥有入场和出场动画了。
<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>
这时再到浏览器中查看效果，虽然都有了动画。但这时候的动画时同时发生的，并不是我们想要的效果。
mode 模式讲解
为了解决这个问题，可以在模板中<transition>标签上加入mode属性。mode属性专门用来控制是先显示离场和入场动画的顺序的。比如现在想让离场动画先显示，然后再显示入场动画。就可以使用mode="out-in"。
template: `
<transition mode="out-in">
<div v-if="isShow">小红进入了试衣间</div>
<div v-else>小丽进入了试衣间</div>
</transition>
<button @click="hanldClick">切换动画</button>
`
当然你也可以用mode="in-out"先显示入场动画，再显示出场动画。只不过这并不是我们想要的方式。
但这时候还是有一个小问题的，就是刚进入页面时，显示的 DOM 元素（小丽进入了试衣间）是没有动画效果的。如果想让进入页面，开始就产生动画效果，可以在<transition>标签上加上appear属性就可以实现。
appear属性的意思是初次对某一个元素进行默认显示的时候也进行动画显示。
template: `
<transition mode="out-in" appear>
<div v-if="isShow">小红进入了试衣间</div>
<div v-else>小丽进入了试衣间</div>
</transition>
<button @click="hanldClick">切换动画</button>
`
这时候在浏览器中预览，刚进入页面时也带有了动画效果。
为了方便大家学习，附上全部源码：
<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 app = Vue.createApp({
data(){
return {
isShow:false
}
},
methods:{
hanldClick(){
this.isShow = ! this.isShow
}
},
template: `
<transition node="out-in" appear>
<div v-if="isShow">小红进入了试衣间</div>
<div v-else>小丽进入了试衣间</div>
</transition>
<button @click="hanldClick">切换动画</button>
`
})
const vm = app.mount("#app")
</script>
讲到这里两个 DOM 元素直接的动画切换效果你就会使用了。会了两个 DOM 元素动画切换效果，学习两个组件之间的切换也变的容易了。下一节我们学习一下组件的切换。
以上关于44. [动画]vue3双DOM元素动画的实现的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。
微信
支付宝如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 44. [动画]vue3双DOM元素动画的实现
