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，欢迎大家关注
