js数字金额滚动动画(vue实现)

感谢参考原文-http://bjbsair.com/2020-03-27/tech-info/7082.html
vue金额滚动动画

<template>  
  <div>  
    <div class="head" @click="this.numFun(0,5000)">点击金额变动</div>  
   <div>{{amount}}</div>  
  </div>  
</<template>  
  
  
<script>  
export default {  
  data () {  
  return {  
    amount: 0  
  }  
}  
methods: {  
    //金额变动动画  
    numFun(startNum,maxNum) {  
      var that = this  
      let numText = startNum;  
      let golb; // 为了清除requestAnimationFrame  
      function numSlideFun(){ // 数字动画  
          numText+=5; // 速度的计算可以为小数 。数字越大，滚动越快  
          if(numText >= maxNum){  
              numText = maxNum;  
              cancelAnimationFrame(golb);  
          }else {  
              golb = requestAnimationFrame(numSlideFun);  
          }  
        that.amount=numText  
        // console.log(numText)  
      }  
       numSlideFun(); // 调用数字动画  
    }  
  }  
}  

当然vue是一个成熟的孩纸了，也有了属于它的对应的插件vue-count-to：

https://www.npmjs.com/package/vue-count-to

这个是相当好用的哦～～推荐推荐