vue動態數據變更動畫

<template>
  <div class="container">
    <div class="head" @click="numFun(0,5000)">點擊金額變更</div>
    <div class="head" @click="addNumber">數額變更</div>
    <div class="numbers">{{amount}}</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        amount: 5000,
        golb: 0
      }
    },
    methods: {
      numFun(startNum, maxNum) {
        let self = this
        let numText = startNum;
        function numSlideFun() { // 數字動畫
          numText += 2; // 速度的計算能夠爲小數,數字越大,滾動越快
          if (numText >= maxNum) {
            numText = maxNum;
            cancelAnimationFrame(self.golb); // 清除requestAnimationFrame
          } else {
            self.golb = requestAnimationFrame(numSlideFun);
          }
          self.amount = numText
        }

        numSlideFun(); // 調用數字動畫
      },
      addNumber() {
        cancelAnimationFrame(this.golb)
        this.numFun(5000, 5200)
      }
    }
  }
</script>

<style lang="stylus">
  .container {
    margin-top: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .head {
      width: 120px;
      height: 70px;
      line-height: @height;
      background: #2d77ee;
      text-align: center;
      color: #fff;
      border-radius: 10px;
      margin-bottom: 20px;
      cursor: pointer;
    }
    .numbers {
      font-size: 32px;
      margin-top: 50px;
    }
  }
</style>
複製代碼