javascript - Angular 2：滚动动画

Question

这位用户提供了一个很好的解决方案（STACKBLITZ）关于如何在 Angular 中检测视口中的元素。原线

我现在想调整它，只要它在视口中就向元素添加一个类。

这将在 Angular 中为我提供一个简单的 Animate on Scroll 功能，而无需外部库。

我还不能让它完全工作：

要添加的 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类；/有什么想法吗？

标签： javascriptangular