VUE3 之 使用标签实现动画与过渡效果 - 这个系列的教程通俗易懂，适合新手
作者：互联网
1. 概述
巴纳姆效应告诉我们：
人们更容易相信笼统的、常见的人格描述，并觉得特别适合自己，认为该描述真实地反映了自己的人格面貌。
这也是所有算命先生的小把戏，算命先生通常把话说的很笼统，很通用，基本是适合所有人的，再加上一些察言观色、随机应变的技巧，不明状况的人就会盲目的相信，觉得很“神”。
我们要学会正确的面对自己，增强自己的判断能力，才能做到真正的了解自己。
言归正传，今天我们来聊聊如何使用标签实现动画与过渡效果。
2.使用标签实现动画与过渡效果
2.1 普通的显示和隐藏
<body>
<div id="myDiv"></div>
</body>
<script>
const app = Vue.createApp({
data(){
return {
show : false
}
},
methods : {
myClick() {
this.show = !this.show;
}
},
template:`
<div>
<div v-if="show">hello world</div>
<button @click="myClick">切换</button>
</div>
`
});
const vm = app.mount("#myDiv");
这是一个简单的例子，我们利用之前学过的 v-if 来简单实现 div 元素显示和隐藏的效果。接下来我们来给这个div元素加上动画和过渡效果。
2.2 标签 + 固定样式实现动画与过渡效果
<style>
@keyframes leftRight {
/* 进度为 X% 时，元素的横坐标位置 */
0% {
transform: translateX(0px);
}
33% {
transform: translateX(-100px);
}
66% {
transform: translateX(100px);
}
100% {
transform: translateX(0px);
}
}
/* 居中 */
.center {
text-align: center;
}
/* 入场起始样式 */
.v-enter-from {
opacity: 0; /* 透明度 */
}
/* 入场过渡效果 */
.v-enter-active {
transition: 3s opacity ease-in;
animation : leftRight 4s;
}
/* 入场结束样式 */
.v-enter-to {
opacity: 1;
}
/* 出场起始样式 */
.v-leave-from {
opacity: 1; /* 透明度 */
}
/* 出场过渡效果 */
.v-leave-active {
transition: 3s opacity ease-out;
animation : leftRight 4s;
}
/* 出场结束样式 */
.v-leave-to {
opacity: 0;
}
</style>
const app = Vue.createApp({
data(){
return {
show : false
}
},
methods : {
myClick() {
this.show = !this.show;
}
},
template:`
<div class="center">
<transition>
<div v-if="show">hello world</div>
</transition>
<button @click="myClick">切换</button>
</div>
`
});
这个例子中我们使用 transition 标签包裹在 div 外面，然后在样式中，使用了固定的 v-enter-from、v-enter-active、v-enter-to、v-leave-from、v-leave-active、v-leave-to 等样式描述了动画和过渡效果。
2.3 自定义样式名称
如果我们不想把样式名称固定，可以这样去写
/* 入场起始样式 */
.myTransition1-enter-from {
opacity: 0; /* 透明度 */
}
/* 入场过渡效果 */
.myTransition1-enter-active {
transition: 3s opacity ease-in;
animation : leftRight 4s;
}
/* 入场结束样式 */
.myTransition1-enter-to {
opacity: 1;
}
/* 出场起始样式 */
.myTransition1-leave-from {
opacity: 1; /* 透明度 */
}
/* 出场过渡效果 */
.myTransition1-leave-active {
transition: 3s opacity ease-out;
animation : leftRight 4s;
}
/* 出场结束样式 */
.myTransition1-leave-to {
opacity: 0;
}
const app = Vue.createApp({
data(){
return {
show : false
}
},
methods : {
myClick() {
this.show = !this.show;
}
},
template:`
<div class="center">
<transition name="myTransition1">
<div v-if="show">hello world</div>
</transition>
<button @click="myClick">切换</button>
</div>
`
});
我们可以在 transition 标签上加上 name 属性，然后把刚才所有样式中开头的 v 替换成 name 的值即可。
3. 综述
今天聊了一下 VUE3 中使用标签实现动画与过渡的效果，希望可以对大家的工作有所帮助，下一节我们继续讲 Vue 中 动画 的相关知识，敬请期待
欢迎帮忙点赞、评论、转发、加关注 ：）
关注追风人聊Java，这里干货满满，都是实战类技术文章，通俗易懂，轻松上手。
4. 个人公众号
追风人聊Java，欢迎大家关注
标签：opacity,动画,show,样式,enter,通俗易懂,leave,VUE3 来源： https://www.cnblogs.com/w84422/p/15967454.html