在视口中时的 Angular 9 动画

Question

我想为我的项目引入动画，特别是<section>一些标题（h1、h2、h3）。我尝试了几种选择；一种使用Angular动画，另一种使用animate.css。

这两个都按预期工作，但现在我只想<section>在 a当前处于视图中时（第一次）设置动画。

起初我尝试了https://www.npmjs.com/package/ng2-animate-on-scroll，但我无法让它工作。即使使用animate.scss。

然后我尝试了：https ://scrollrevealjs.org/通过使用https://www.npmjs.com/package/ngx-scrollreveal。这确实有效，但我只能让它使用cubic-bezier(0.25, 0.1, 0.25, 1). 其他似乎都不起作用，我想拥有animate.css或至少fadeInUp、fadeInLeft和fadeInRight中可用的所有功能

然后我尝试了：https ://github.com/Epenance/ngx-animate-in#readme再次，有效并且是迄今为止最好的，因为它使用角度动画，但在 IE 中根本不支持，所以这是不好。

所以，我的问题是：有更好的方法吗？理想情况下，我希望在将内容滚动到视图中时使用角度动画，并且我希望能够控制要使用的动画。这可能吗？有没有做过或使用过任何可能有帮助的东西？

Answer 1

最后，使用了一些我将其与 ngx-animate 指令合并的旧代码来得出这个：import { Directive, ElementRef, HostListener, Input } from '@angular/core';import {&nbsp; AnimationBuilder,&nbsp; AnimationFactory,&nbsp; AnimationMetadata,&nbsp; AnimationPlayer,&nbsp; style,&nbsp; animate,} from '@angular/animations';@Directive({&nbsp; selector: '[sxpAnimate]',})export class AnimateDirective {&nbsp; @Input() animateInAnimation: AnimationMetadata | AnimationMetadata[];&nbsp; @HostListener('window:scroll', ['$event']) // for window scroll events&nbsp; onScroll() {&nbsp; &nbsp; this.animate();&nbsp; }&nbsp; private animating: boolean;&nbsp; private player: AnimationPlayer;&nbsp; private defaults: any = {&nbsp; &nbsp; offset: 0,&nbsp; };&nbsp; constructor(&nbsp; &nbsp; private el: ElementRef,&nbsp; &nbsp; private animationBuilder: AnimationBuilder&nbsp; ) {}&nbsp; ngOnInit() {&nbsp; &nbsp; this.initialize();&nbsp; &nbsp; this.animate();&nbsp; }&nbsp; private initialize(): void {&nbsp; &nbsp; let animation: AnimationFactory;&nbsp; &nbsp; if (&nbsp; &nbsp; &nbsp; this.animateInAnimation !== null &&&nbsp; &nbsp; &nbsp; this.animateInAnimation !== undefined&nbsp; &nbsp; ) {&nbsp; &nbsp; &nbsp; animation = this.animationBuilder.build(this.animateInAnimation);&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; animation = this.animationBuilder.build([&nbsp; &nbsp; &nbsp; &nbsp; style({ opacity: 0, transform: 'translateX(-100px)' }),&nbsp; &nbsp; &nbsp; &nbsp; animate(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '1200ms cubic-bezier(0.35, 0, 0.25, 1)',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style({ opacity: 1, transform: 'translateX(0)' })&nbsp; &nbsp; &nbsp; &nbsp; ),&nbsp; &nbsp; &nbsp; ]);&nbsp; &nbsp; }&nbsp; &nbsp; this.player = animation.create(this.el.nativeElement);&nbsp; &nbsp; this.player.init();&nbsp; }&nbsp; private animate(): void {&nbsp; &nbsp; const inView = this.isInViewport();&nbsp; &nbsp; if (!inView) this.animating = false;&nbsp; &nbsp; if (!inView || this.animating) return;&nbsp; &nbsp; this.player.play();&nbsp; &nbsp; this.animating = true;&nbsp; }&nbsp; private isInViewport(): boolean {&nbsp; &nbsp; const bounding = this.el.nativeElement.getBoundingClientRect();&nbsp; &nbsp; let top =&nbsp; &nbsp; &nbsp; bounding.top -&nbsp; &nbsp; &nbsp; (window.innerHeight || document.documentElement.clientHeight);&nbsp; &nbsp; let bottom = bounding.top + bounding.height + this.defaults.offset;&nbsp; &nbsp; return top < 0 && bottom > 0;&nbsp; }}似乎按我的意愿工作；所以我会以此为基础:)