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

列表动画

首先还是使用之前章节中的动画样式效果

<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>
` 

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sUZ3gu8t-1652320506520)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6cc6bda1842647af9c03933a1ba34d93~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

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

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

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

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vUIpiFvb-1652320506521)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ff522dae8b2c41c5a7c42b866b0afdbb~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

---

状态动画

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hnnelsmJ-1652320506522)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7d2c8fb2d13c44d5b10047404e7f36cc~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

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

总结

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

mJ-1652320506522)]

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

总结

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