angular 数字滚动插件countUp.js-angular2

最新推荐文章于 2025-06-06 09:15:08 发布

原创最新推荐文章于 2025-06-06 09:15:08 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

angular 同时被 2 个专栏收录

57 篇文章

订阅专栏

ng-alain

35 篇文章

订阅专栏

本文介绍如何使用countUp.js-angular2插件为Angular2应用添加平滑的数值变化动画效果。主要内容包括插件的下载安装、通过npm安装、获取GitHub源码以及两种使用方式：直接在HTML标签中使用和通过JS动态加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、插件下载

npm i countUp.js-angular2 -- save

2、git地址

https://github.com/inorganik/countUp.js-angular2

3、使用

1）、在标签中使用

<h1 countUp [endVal]="myEndVal">0</h1>

2）、js动态使用

loadData(data) {
      const id = 'app-small-card-' + this.id;
      const val = data || this.value;
      const oldVal = this.oldData;
      const numAnim = new CountUp(id, oldVal, val);
      this.oldData = val;
      if (!numAnim.error) {
          numAnim.start();
      } else {
          console.error(numAnim.error);
      }
  }