角度2：滚动动画

Question

This user为如何在Angular的视口中检测元素提供了很好的解决方案(STACKBLITZ)。 original thread

我现在想通过在视口中的元素上添加一个类来对其进行调整。

这将为我提供一个简单的Angular滚动动画功能，而无需外部库。

尽管如此，我仍无法完全发挥作用：

要添加的CSS动画：

/* ----------------------------------------------
 * Generated by Animista
 * ---------------------------------------------- */
.slide-top {
    -webkit-animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
            animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes slide-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
  }
}
@keyframes slide-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
  }
}

将CSS添加到的HTML：

<div (visibilityChange)="_visibilityChangeHandler($event)" enterTheViewportNotifier>My div to rotate</div>

TS：

constructor(private renderer: Renderer2) {}

public _visibilityChangeHandler (nativeElement: any) {
    if (nativeElement) {
       this.renderer.addClass(nativeElement, 'slide-top');
    }
 }}

以及调整后的视口类-我只是更改了EventEmitter并将返回this._elementRef.nativeElement，然后向其中添加css类。

import { AfterViewInit, Directive, ElementRef, EventEmitter, Host, OnDestroy, Output } from "@angular/core";

@Directive({
  selector: "[enterTheViewportNotifier]"
})
export class EnterTheViewportNotifierDirective implements AfterViewInit, OnDestroy {
  @Output() visibilityChange: EventEmitter<ElementRef> = new EventEmitter<ElementRef>();

  private _observer: IntersectionObserver;

  constructor(@Host() private _elementRef: ElementRef) {}

  ngAfterViewInit(): void {
    const options = {
      root: null,
      rootMargin: "0px",
      threshold: 0.0
    };

    this._observer = new IntersectionObserver(this._callback, options);

    this._observer.observe(this._elementRef.nativeElement);
  }

  ngOnDestroy() {
    this._observer.disconnect();
  }

  private _callback = (entries, observer) => {
    entries.forEach(entry => {
      console.log(entry.isIntersecting ? 'I am visible' : 'I am not visible');
      this.visibilityChange.emit(entry.isIntersecting ? this._elementRef.nativeElement : null)
    });
  };
}

这似乎可行-但动画只能播放一次。有什么想法可以让我再次滚动到该区域时重新播放动画吗？我想不出如何删除/阅读css类； /有任何想法吗？