VUE3|VUE3 之使用标签实现动画与过渡效果 - 这个系列的教程通俗易懂，适合新手 VUE3之使用标签实现动画与过渡

1. 概述
巴纳姆效应告诉我们：
人们更容易相信笼统的、常见的人格描述，并觉得特别适合自己，认为该描述真实地反映了自己的人格面貌。
这也是所有算命先生的小把戏，算命先生通常把话说的很笼统，很通用，基本是适合所有人的，再加上一些察言观色、随机应变的技巧，不明状况的人就会盲目的相信，觉得很“神”。
我们要学会正确的面对自己，增强自己的判断能力，才能做到真正的了解自己。

言归正传，今天我们来聊聊如何使用标签实现动画与过渡效果。

2.使用标签实现动画与过渡效果
2.1 普通的显示和隐藏

const app = Vue.createApp({ data(){ return { show : false } }, methods : { myClick() { this.show = !this.show; } }, template:`if="show">hello world ` }); const vm = app.mount("#myDiv");

VUE3|VUE3 之使用标签实现动画与过渡效果 - 这个系列的教程通俗易懂，适合新手

文章图片

文章图片

这是一个简单的例子，我们利用之前学过的 v-if 来简单实现 div 元素显示和隐藏的效果。接下来我们来给这个div元素加上动画和过渡效果。
【VUE3|VUE3 之使用标签实现动画与过渡效果 - 这个系列的教程通俗易懂，适合新手】
2.2 标签 + 固定样式实现动画与过渡效果

@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; }

const app = Vue.createApp({ data(){ return { show : false } }, methods : { myClick() { this.show = !this.show; } }, template:` if="show">hello world ` });

这个例子中我们使用 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:` if="show">hello world ` });

我们可以在 transition 标签上加上 name 属性，然后把刚才所有样式中开头的 v 替换成 name 的值即可。

3. 综述
今天聊了一下 VUE3 中使用标签实现动画与过渡的效果，希望可以对大家的工作有所帮助，下一节我们继续讲 Vue 中动画的相关知识，敬请期待
欢迎帮忙点赞、评论、转发、加关注：）
关注追风人聊Java，这里干货满满，都是实战类技术文章，通俗易懂，轻松上手。

4. 个人公众号
追风人聊Java，欢迎大家关注