数字动画效果：countup.js和vue-countupjs的使用

一、countup.js

1、下载

　　npm i countup.js@1.9.3　　（最新版本的有问题）

2、DOM

    <div class="num-wrapper">
      <span ref="countupRef" v-for="item in numList" :key="item">{{item}}</span>
    </div>

　　css：

  .num-wrapper {
    > span {
      padding: 10px;
      display: inline-block;
      background-color: rgba(red, 0.5);
      margin-right: 10px;
      font-family: 'digital';
      font-size: 28px;
    }
  }

3、引入和使用

import CountUp from 'countup.js'
export default {
  data() {
    return { numList: [7539810.1493, 7087961, 1010452, 5163393] }
  },
  methods: {
    initCountUp() {
      // 在created中执行函数时需要通过nextTick拿到最新的DOM
      this.$nextTick(() => {
        const countupLength = this.$refs.countupRef.length
        let animal = null
        for (let i = 0; i < countupLength; i++) {
          animal = new CountUp(
            this.$refs.countupRef[i], // 目标元素
            0, // 开始值
            this.$refs.countupRef[i].innerText, // 结束值
            2, // 小数位数
            1.5 // 动画时间
          )
          animal.start()
        }
      })
    }
  },
  created() {
    this.initCountUp()
  }

4、效果：

　　

 

 

 

二、vue-countupjs

1、下载

　　npm i vue-countupjs

2、引入并注册

import VueCountUp from 'vue-countupjs'

  components: { VueCountUp }

3、使用

    <VueCountUp :start-value="0" :end-value="100" />