![]UWOD(KIB9LJS9~S[T{QHM9.png](https://ucc.alicdn.com/pic/developer-ecology/c5e704ac03874a46a1022b9aaeca1a80.png?x-oss-process=image/resize,w_1400/format,webp "]UWOD(KIB9LJS9~S[T{QHM9.png")
前言
在上一篇的文章中，我们了解了vue里面对CSS动画效果的一个处理，本章节主要就是使用transition标签来实现单元素组件的过渡和动画效果。
单元素入场出场过渡效果
在以前的文章中，我们写过v-if和v-show指令去控制某个元素的显示隐藏，那么这个元素就是一个单元素效果了。
<script> const app = Vue.createApp({ data(){ return { show: false } }, methods: { handleClick(){ this.show = !this.show } }, template: ` <div> <div v-if="show">Hello World</div> <button @click="handleClick">切换</button> </div> ` }); const vm = app.mount('#root'); </script> 复制代码
现在这样的效果还只是简单的显示隐藏的效果，如果要进行动画效果呢，可以使用vue里面的一个transition标签。
template: ` <div> <transition> <div v-if="show">Hello World</div> </transition> <button @click="handleClick">切换</button> </div> ` 复制代码
直接在div标签外面包一层transition标签，写完标签之后打开浏览器肯定是没有效果的，这时候我们就要去写一些样式了。
<style> .v-enter-from{ opacity: 0; } .v-enter-active{ transition: opacity 3s ease-out; } .v-enter-to{ opacity: 1; } </style>
v-enter-from表示入场时最初的效果是透明度为0
v-enter-to表示入场效果执行完成之后最终的透明度为1
v-enter-active表示动画执行的过程，执行opacity样式三秒，并用ease-out的效果
![C3V09[3ZJPD28$~{S]LLCR6.png](https://ucc.alicdn.com/pic/developer-ecology/c8bdfba7c2c84c91a3b84092c498a0a4.png?x-oss-process=image/resize,w_1400/format,webp "C3V09[3ZJPD28$~{S]LLCR6.png")
在浏览器中可以看出，点击切换按钮时，入场效果已经执行了，但是出场的时候却没有效果，那接下来就该完善一下出场效果的代码了。
.v-leave-from{ opacity: 1; } .v-leave-active{ transition: opacity 3s ease-in; } .v-leave-to{ opacity: 0; }
v-leave-from表示出场时最初的效果是透明度为1v-leave-to表示出场效果执行完成之后最终的透明度为0v-leave-active表示动画执行的过程，执行opacity样式三秒，并用ease-in的效果
![2]}LKRXQ8M6W%E1%RA`PBMJ.png](https://ucc.alicdn.com/pic/developer-ecology/8a9545e41c224b95b96fe4d64dcfe189.png?x-oss-process=image/resize,w_1400/format,webp "2]}LKRXQ8M6W%E1%RA`PBMJ.png")
以上的样式名称都是vue里面
transition标签样式的固定写法，写错了是不会执行的哦。
通过transition标签，并配合一些固定的样式名，就可以很好的实现单元素淡入淡出的过渡效果了。
由于入场动画结束时和出场动画初始化时的效果是一样的，而动画执行过程也可以写成一样的，所以样式代码是可以精简一下的。
<style> .v-enter-from{ opacity: 0; } .v-enter-active, .v-leave-active{ transition: opacity 3s ease-out; } .v-enter-to{ opacity: 1; } .v-leave-to{ opacity: 0; } </style>
单元素动画效果
实现一个简单的位移动画效果就比较简单了，只需要定义一个keyframes的位移动画效果，然后使用v-enter-active和v-leave-active定义动画名称和时长。
<style> @keyframes shake { 0% { transform: translateX(-100px); } 50% { transform: translateX(-50px); } 100% { transform: translateX(50px); } } .v-enter-active, .v-leave-active{ animation: shake 2s; } </style> 复制代码
![7%24I013@Y~SF3H]HDHVJJK.png](https://ucc.alicdn.com/pic/developer-ecology/0ecae770a6c04499a90aefe23a21153b.png?x-oss-process=image/resize,w_1400/format,webp "7%24I013@Y~SF3H]HDHVJJK.png")
属性name
在上面的过渡效果和动画效果中，我们使用的class名称都是固定以v开头的写法，其实这个是可以自定义的，可以通过transition标签中的name属性。
template: ` <div> <transition name="juejin"> <div v-if="show">Hello World</div> </transition> <button @click="handleClick">切换</button> </div> ` 复制代码
比如我们将name属性值改为juejin，那么在定义class样式的时候，就要将v也改成juejin开头了。
<style> .juejin-enter-from{ opacity: 0; } .juejin-enter-active{ transition: opacity 3s ease-out; } .juejin-enter-to{ opacity: 1; } </style> 复制代码
- 由于这个定义了没什么太大的用处，而且写起来也麻烦，所以
name属性在一般应用场景是不推荐修改的。
属性class
transition标签中，除了可以自定义name属性之外，还可以自定义class属性，通过class属性可以完全修改样式名称。
template: ` <div> <transition enter-active-class="hello" leave-active-class="bye"> <div v-if="show">Hello World</div> </transition> <button @click="handleClick">切换</button> </div> ` 复制代码
enter-active-class绑定值为hello
leave-active-class绑定值为bye
<style> @keyframes shake { 0% { transform: translateX(-100px); } 50% { transform: translateX(-50px); } 100% { transform: translateX(50px); } } .hello, .bye{ animation: shake 1s; } </style> 复制代码
- 样式中的名称也要对应的修改为
hello和bye
由于我们在样式中给的是 1秒的执行时长，所以看起来会快一些。
除了enter-active-class和leave-active-class之外，其他的出场入场效果都可以自定义class。
enter-form-class
enter-to-class
leave-from-class
leave-to-class
使用属性
class可以更好的实现一些复杂的动画效果，也可以直接引用第三方库。
第三方库
在这个动画效果animate.style第三方库中，有很多动画效果，无需自己去实现，直接引用CDN，然后在transition标签中的class上就可以直接使用了。
// CDN链接 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> 复制代码
template: ` <div> <transition enter-active-class="animate__animated animate__bounce" leave-active-class="animate__animated animate__flash"> <div v-if="show">Hello World</div> </transition> <button @click="handleClick">切换</button> </div> ` 复制代码
通过给enter-active-class和leave-active-class自定义第三方库中的样式名之后，页面上就会很快的渲染出对应的动画效果了。
更多效果可以在第三方库的右侧导航栏中点击，页面logo就可以出现对应的动画效果了。
总结
本篇文章主要讲解了transition标签实现单元素过渡效果和动画效果，还讲解了该标签的name和class属性，额外带了一段第三方库的实现效果，大家可以多试试哦。
