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

2022-09-26 136

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

]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>
复制代码

RCTI1IE%`1UI7PETIK8HT)3.png

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

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

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

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

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

.v-move{
  transition: all .5s ease-in;
}
复制代码

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

CE8[GEBUBDPCTU74UIVV9P6.png

状态动画

之前的文章是用的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>
复制代码

`~(9L@}`W)7~HX5_0RBM~8D.png

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

%WNBG{Y)}Z3IXNP((P7NMC9.png

重新定义个数据值animationNum，用来做动画效果

在浏览器中会发现点击按钮之后，就会一直累加，并不会停止

这时候就要去加一个判断，等于10的时候，就让动画暂停

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

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

5~~O`N6Z@XZZWR[[6YB%)6B.png

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

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

总结

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

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

前言

列表动画

状态动画

总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景