当元素仅部分处于视图中时，IntersectionObserver 会导致闪烁

Question

我正在开发一个 Angular 18 项目，我想使用 IntersectionObserver API 在按钮进入视图时为其设置动画，并且它可以工作。

但是，如果只有顶部按钮的一半可见，它就会开始闪烁，这就是我要解决的问题。

这是我的组件代码：

export class FooterComponent implements AfterViewInit {
  @ViewChild('invite_btn') protected invite_btn!: ElementRef<HTMLAnchorElement>;

  ngAfterViewInit() {
    const observer: IntersectionObserver = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          this.invite_btn.nativeElement.classList.add('animate__animated', 'animate__fadeInUp');
        } else {
          this.invite_btn.nativeElement.classList.remove('animate__animated', 'animate__fadeInUp');
        }
      });
    });

    observer.observe(this.invite_btn.nativeElement);
  }
}

我尝试使用

entry.IntersectionRatio

检查，但这没有帮助，因为比率始终低于

1.0

。

我该如何解决这个问题？视频示例：

Answer 1

问题已经解决了。

我的问题是

invite_btn

是我按钮上的

<a>

标签 - 我只是使用它的父元素（整个按钮）来观察：

observer.observe(this.invite_btn.nativeElement.parentElement as HTMLElement);