数字动画
- 依赖countUp.js库
npm install countup.js ===> countUp.js
- angularJs有封装好的指令
npm install countup.js-angular1 ===>angular-countUp.js(依赖countUp.js/angular.js文件)
- js中注入 countUpModule 模块,即可使用countUp指令(该指令中已经有封装好的调用countUp.js中的api,实现动画效果)。
- 如果需要监听滚动效果可引入基于angularjs的 angular-scroll-spy 库,有首次进入、每次进入、每次滚出三种事件可监听,通过注入scrollSpyModule模块,自定义指令scrollSpy,指定唯一id
$scope.$on('elementFirstScrolledIntoView', function(event, dat) { if(data === 'myElementId') { //do something } });
<i id="myElementId" count-up start-val="0" end-val="30" scroll-spy-event="elementFirstScrolledIntoView" scroll-spy> </i>