![]UWOD(KIB9LJS9~S[T{QHM9.png](https://ucc.alicdn.com/pic/developer-ecology/4784737ae7fa4c5d965b44ca62f59708.png?x-oss-process=image/resize,w_1400/format,webp "]UWOD(KIB9LJS9~S[T{QHM9.png")
前言
在上一篇的文章中，我们了解了vue里面transition标签来实现元素和组件的过渡和动画效果，还知道了transition中一些属性和钩子函数的用法，本章节将带着大家使用transition-group标签实现列表动画和状态动画的效果。
列表动画
首先还是使用之前章节中的动画样式效果
<style> .v-enter-from{ opacity: 0; } .v-enter-active{ transition: all .5s ease-in; } .v-enter-to{ opacity: 1; } .list-item{ display: inline-block; margin-right: 10px; } </style> 复制代码
为了实现列表效果，我们就要在data函数里面去定义一个列表可循环的数据值，然后将它嵌套在transition标签中进行循环。
<script> const app = Vue.createApp({ data(){ return { list: [1, 2, 3] } }, methods: { handleClick(){ this.list.unshift(this.list.length + 1) }, }, template: ` <div> <transition> <div v-for="item in list" :key="item">{{item}}</div> </transition> <button @click="handleClick">切换</button> </div> ` }); const vm = app.mount('#root'); </script> 复制代码
虽然点击按钮时有了动画效果，但是为啥页面上没有渲染出列表数据呢？
那是因为循环列表时，需要使用一个新的标签transition-group去包裹列表标签。
template: ` <div> <transition-group> <div class="list-item" v-for="item in list" :key="item">{{item}}</div> </transition-group> <button @click="handleClick">切换</button> </div> ` 复制代码
![KV9423{0C64Z15OBCS]G3{X.png](https://ucc.alicdn.com/pic/developer-ecology/1676da3cb8364310b47ea3330c3a2bf4.png?x-oss-process=image/resize,w_1400/format,webp "KV9423{0C64Z15OBCS]G3{X.png")
这样在每次点击按钮时，列表就会执行动画效果了。
可是大家有没有发现，在追加数字的时候，后面已经存在的数字是直接平移的效果，并没有一个动态效果。
这时候就要用到transition-group的一个样式名v-move
.v-move{ transition: all .5s ease-in; } 复制代码
在style样式标签中，添加v-move的样式，和v-enter-active的样式一致即可
状态动画
之前的文章是用的transition标签，而列表动画是用的transition-group标签实现的动画效果。但是下面状态动画的效果不会使用这两个标签去实现，而是直接使用js实现动画效果。
<script> const app = Vue.createApp({ data(){ return { num: 1 } }, methods: { handleClick(){ this.num = 10 }, }, template: ` <div> <div>{{num}}</div> <button @click="handleClick">切换</button> </div> ` }); const vm = app.mount('#root'); </script> 复制代码
当我们想要实现一个从1变换到10的时候，这样点击按钮之后直接改变数据的效果是比较生硬的，那我们想要把1-10之间的内容也慢慢显示出来，到最后变成10的时候固定住。
const app = Vue.createApp({ data(){ return { num: 1, animationNum: 1 } }, methods: { handleClick(){ this.num = 10 setInterval(() => { this.animationNum += 1 }, 50) }, }, template: ` <div> <div>{{animationNum}}</div> <button @click="handleClick">切换</button> </div> ` }); 复制代码
- 重新定义个数据值
animationNum，用来做动画效果
- 在浏览器中会发现点击按钮之后，就会一直累加，并不会停止
- 这时候就要去加一个判断，等于
10的时候，就让动画暂停
methods: { handleClick(){ this.num = 10 const animate = setInterval(() => { this.animationNum += 1 if(this.animationNum === 10){ clearInterval(animate) } }, 50) }, }, 复制代码
- 给
setInterval赋值，然后判断当animationNum等于10的时候，就将animate干掉。
当点击按钮之后，会从1数到10，然后暂停，再次点击按钮时会发现，还会继续累加，那我们就要继续解决这个bug了。
methods: { handleClick(){ this.num = 10 if(this.animationNum < this.num){ const animate = setInterval(() => { this.animationNum += 1 if(this.animationNum === 10){ clearInterval(animate) } }, 50) } }, }, 复制代码
![KMM{M0AASG0D]]34HNVNBR7.png](https://ucc.alicdn.com/pic/developer-ecology/b244f0e574584dc397e6025d049f8e5c.png?x-oss-process=image/resize,w_1400/format,webp "KMM{M0AASG0D]]34HNVNBR7.png")
- 在点击事件的方法中进行判断，当
animationNum小于num时，才会执行动画效果。
总结
本章节主要讲解了列表动画中的新标签transition-group和它的新样式名称v-move，还讲解了状态动画的实现过程，状态动画主要会运用到svg这种数据变化的效果中。学习完本篇文章之后，还是希望大家一起加油！💪🏻
