Angular animation 滚动

Question

我用 angular 构建了一个网页，每个模块都是一个组件，其中有一个 animation，但它仅在页面打开时运行，但我需要在组件在屏幕上可见时执行 animation。 我只是在下面尝试通过检查页面的 scrollY 来隐藏和显示组件。 有没有更好的方法呢？

  @HostListener('window:scroll', ['$event']) onWindowScroll(e: any) {
    if (window.pageYOffset < 180) {
      this.heroShown = 0;
    } else {
      this.heroShown = 1;
    }
    console.log(e.target['scrollingElement'].scrollTop);
    console.log(document.body.scrollTop);
    console.log(window.pageYOffset);
  }

`

Answer 1

为此，您可以使用Intersection Observer 。 当元素可见时，观察者会触发一个事件。 因此，当事件触发时，您可以启动 animation。

private createObserver() {
    const options = {
      rootMargin: '0px',
      threshold: this.threshold,
    };

    const isIntersecting = (entry: IntersectionObserverEntry) =>
      entry.isIntersecting || entry.intersectionRatio > 0;

    this.observer = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
        if (isIntersecting(entry)) {
          this.subject$.next({ entry, observer });
        }
      });
    }, options);
  }

另一种存档方法是使用像gsap这样的框架在那里你可以使用像 scrolltrigger 这样的东西。 在此处查看文档。