[VUE]数字滚动动画|金额滚动动画

vue金额滚动动画

效果预览

 

QQ20190124-0.gif

<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
这个是相当还用的哦～～推荐推荐

转自：
作者：小西瓜简书
链接：https://www.jianshu.com/p/90f40f5b1800
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。