![]UWOD(KIB9LJS9~S[T{QHM9.png](https://ucc.alicdn.com/pic/developer-ecology/a1eb17eec5e74f2d8b3c688a68fcfd17.png?x-oss-process=image/resize,w_1400/format,webp "]UWOD(KIB9LJS9~S[T{QHM9.png")
前言
在上一篇的文章中，我们了解了vue里面transition标签来实现单元素组件的过渡和动画效果，还知道了transition中的name属性和class属性的用法，本章节继续带着大家一起了解transition的更多用法。
合并使用
在上一章节中我们单独实现了过渡效果和动画效果，下面我们就来实现一个合并使用的效果。
<style> @keyframes shake { 0% { transform: translateX(-100px); } 50% { transform: translateX(-50px); } 100% { transform: translateX(50px); } } .v-enter-from{ color: green; } .v-enter-active{ animation: shake 2s; transition: color 2s ease-in; } .v-leave-active{ color: green; animation: shake 2s; transition: all 2s ease-in; } </style> 复制代码
- 入场动画中添加了一个颜色。
- 入场动画和出场动画执行过程中，
animation为位移2秒，transition为2秒淡入效果
- 出场动画执行过程中，颜色还是为
green
这时候定义的动画和过渡时长都是 2 秒，那如果其中一个效果时长改为 5 秒会怎样呢？
.v-enter-active{ animation: shake 5s; transition: color 2s ease-in; } .v-leave-active{ color: green; animation: shake 5s; transition: all 2s ease-in; }
![$5X4W08{9V(_1RK{H20S]XU.png](https://ucc.alicdn.com/pic/developer-ecology/5ab2219541fc49a0a76626305424f2be.png?x-oss-process=image/resize,w_1400/format,webp "$5X4W08{9V(_1RK{H20S]XU.png")
在浏览器中看到的过渡和动画效果就会不一致了。那么就得使用一个新的属性type
属性type
在transition标签上添加一个type属性，值可以设置为transition或animation，根据实际情况改变即可。
template: ` <div> <transition type="transition"> <div v-if="show">Hello World</div> </transition> <button @click="handleClick">切换</button> </div> ` 复制代码
添加了type属性之后，会发现动画本来会延时到5秒的时候才会执行完，现在会跟随transition设置的2秒时长去同步执行完成。
属性duration
直接在style里面配置动画时间，或者是使用type属性配置同步执行，都是通过style里面的样式定义的时长去执行的整个动画效果，而且修改一个时长，还得额外修改其他的时长。
那如果我想直接定义一次动画时长，就要用到duration属性了。
template: ` <div> <transition :duration="500"> <div v-if="show">Hello World</div> </transition> <button @click="handleClick">切换</button> </div> ` 复制代码
![8Y5(Y}ZP}7P2N]T06VZ0@XP.png](https://ucc.alicdn.com/pic/developer-ecology/c538168b403544b093f263005050383c.png?x-oss-process=image/resize,w_1400/format,webp "8Y5(Y}ZP}7P2N]T06VZ0@XP.png")
duration属性值是动态的，所以需要用v-bind指令的形式去绑定。
duration属性值表示的是执行动画时长，用毫秒计时。
duration属性值会统一样式中的transition和animation的时长，而样式中定义的时长则会失效。
上面定义的duration是一个数字，他也可以是一个对象。
template: ` <div> <transition :duration="{enter: 1000, leave: 3000}"> <div v-if="show">Hello World</div> </transition> <button @click="handleClick">切换</button> </div> ` 复制代码
- 定义入场动画时长
1秒，出厂动画时长3秒。
钩子函数
transition标签在上面的讲解中都是通过css样式去实现的动画效果，其实标签里面还有钩子函数通过JS的方法实现动画效果。
- 钩子函数类似于之前讲解过的vue生命周期函数，也是在某个时间点自动执行的函数。
<script> const app = Vue.createApp({ data(){ return { show: false } }, methods: { handleClick(){ this.show = !this.show }, handleBeforeEnter(el){ el.style.color = "red" }, handleEnterActive(el, done){ setInterval(() => { const color = el.style.color if(color === 'red'){ el.style.color = "green" } else { el.style.color = "red" } }, 1000) }, handleEnterEnd(el){ el.style.color = "blue" } }, template: ` <div> <transition :css="false" @before-enter="handleBeforeEnter" @enter="handleEnterActive" @after-enter="handleEnterEnd"> <div v-if="show">Hello World</div> </transition> <button @click="handleClick">切换</button> </div> ` }); const vm = app.mount('#root'); </script> 复制代码
transition标签中定义了一个属性css=false，表示css中的样式失效了，也就是不会执行了。
transition标签中定义了三个钩子函数：before-enter、enter、after-enter
before-enter表示初始化动画效果
enter表示动画执行时
after-enter动画执行结束之后
在浏览器中开始执行动画效果之后，发现好像并没有执行结束动画的效果，这是因为在enter函数中，没有将setInterval中的效果结束掉。
handleEnterActive(el, done){ const animate = setInterval(() => { const color = el.style.color if(color === 'red'){ el.style.color = "green" } else { el.style.color = "red" } }, 1000) setTimeout(() => { clearInterval(animate) }, 3000) }, 复制代码
- 在
enter函数中在定义一个setTimeout函数，3 秒之后关闭setInterval函数
这时候会发现，虽然将setInterval函数关闭了，动画效果也停止了，但是还是没有结束动画的效果。
那么就要使用到enter函数中的另一个参数done。
setTimeout(() => { clearInterval(animate) done() }, 3000) 复制代码
- 关闭
setInterval函数的同时执行done函数，就是为了告诉transition标签中的after-enter函数，该执行结束动画了。
![_CK8{_}[S@]9RM5521U]NXK.png](https://ucc.alicdn.com/pic/developer-ecology/6558afcc62ad4a338fe6ba61e590fdda.png?x-oss-process=image/resize,w_1400/format,webp "_CK8{_}[S@]9RM5521U]NXK.png")
总结
本章节还是继续讲解了transition标签，对于多动画的效果、type属性、
duration属性、钩子函数进行了讲解。至此transition标签的单元素过渡和动画效果就讲解完毕了。希望大家可以多多尝试！！！
