angular - 当元素进入 View 时触发 CountUp 功能

Question

我正在使用这个库

https://github.com/inorganik/ngx-countUp

有没有办法只在到达数字部分时激活计数动画

换句话说，当元素滚动到 View 中时触发它( <h1 [countUp]="345">0</h1> )

那可能吗？

Answer 1

Demo Viewchild是一种方法。

在 html 中将值设为参数。

<h1 #counter [countUp]="param">0</h1>

在组件中

@ViewChild('counter') counter: ElementRef;
param=0;

使用 hoSTListener 监听滚动并检查滚动是否到达 html 如果是，则将计数更改为 365

@HostListener('window:scroll', ['$event']) // for window scroll events
onWindowScroll(event) {
   var rect = this.counter.nativeElement.getBoundingClientRect();
   var elemTop = rect.top; var elemBottom = rect.bottom;
   (elemTop >= 0) && (elemBottom <= window.innerHeight) ? this.param=365:null
}