數字動畫效果：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" />