vue 数字动画递增_js数字金额滚动动画(vue实现)

最新推荐文章于 2024-08-09 11:45:42 发布

lifeonex

最新推荐文章于 2024-08-09 11:45:42 发布

阅读量847

点赞数

文章标签： vue 数字动画递增

本文链接：https://blog.csdn.net/weixin_28758189/article/details/112501101

版权

本文介绍了如何在Vue中实现数字动画递增效果，推荐使用vue-count-to插件，这是一个非常方便且强大的解决方案。

摘要由CSDN通过智能技术生成

感谢参考原文-http://bjbsair.com/2020-03-27/tech-info/7082/ 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

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