一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第25天，点击查看活动详情。

前言

在上一篇的文章中，我们了解了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>

chrome-capture (4).gif

虽然点击按钮时有了动画效果，但是为啥页面上没有渲染出列表数据呢？

那是因为循环列表时，需要使用一个新的标签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>
`

chrome-capture (5).gif

这样在每次点击按钮时，列表就会执行动画效果了。

可是大家有没有发现，在追加数字的时候，后面已经存在的数字是直接平移的效果，并没有一个动态效果。

这时候就要用到transition-group的一个样式名v-move

.v-move{
  transition: all .5s ease-in;
}

在style样式标签中，添加v-move的样式，和v-enter-active的样式一致即可

chrome-capture (6).gif

状态动画

之前的文章是用的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>

chrome-capture (7).gif

当我们想要实现一个从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>
    `
});

chrome-capture (8).gif

重新定义个数据值animationNum，用来做动画效果
在浏览器中会发现点击按钮之后，就会一直累加，并不会停止
这时候就要去加一个判断，等于10的时候，就让动画暂停

methods: {
  handleClick(){
    this.num = 10
    const animate = setInterval(() => {
      this.animationNum += 1
      if(this.animationNum === 10){
        clearInterval(animate)
      }
    }, 50)
  },
},

给setInterval赋值，然后判断当animationNum等于10的时候，就将animate干掉。

chrome-capture (9).gif

当点击按钮之后，会从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)
    }
  },
},

chrome-capture (10).gif

在点击事件的方法中进行判断，当animationNum小于num时，才会执行动画效果。

总结

本章节主要讲解了列表动画中的新标签transition-group和它的新样式名称v-move，还讲解了状态动画的实现过程，状态动画主要会运用到svg这种数据变化的效果中。学习完本篇文章之后，还是希望大家一起加油！💪🏻

【Vue3从零开始-第四章】4-5 列表动画和状态动画

前言

列表动画

状态动画

总结