在视口中时的角度9动画

Question

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

这两种方法都是重编的，但现在我只想在当前视图中<section>时(第一次(设置动画。

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

然后我试着：https://scrollrevealjs.org/通过使用https://www.npmjs.com/package/ngx-scrollreveal.这确实有效，但我只能使用cubic-bezier(0.25, 0.1, 0.25, 1)。其他似乎都不起作用，我希望拥有animate.css中可用的所有功能，或者至少拥有音量上限、左音量下限和右音量上限

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

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

Answer 1

最后，我使用了一些旧代码，并将其与ngx animate指令合并，得出了以下结果：

import { Directive, ElementRef, HostListener, Input } from '@angular/core';
import {
AnimationBuilder,
AnimationFactory,
AnimationMetadata,
AnimationPlayer,
style,
animate,
} from '@angular/animations';
@Directive({
selector: '[sxpAnimate]',
})
export class AnimateDirective {
@Input() animateInAnimation: AnimationMetadata | AnimationMetadata[];
@HostListener('window:scroll', ['$event']) // for window scroll events
onScroll() {
this.animate();
}
private animating: boolean;
private player: AnimationPlayer;
private defaults: any = {
offset: 0,
};
constructor(
private el: ElementRef,
private animationBuilder: AnimationBuilder
) {}
ngOnInit() {
this.initialize();
this.animate();
}
private initialize(): void {
let animation: AnimationFactory;
if (
this.animateInAnimation !== null &&
this.animateInAnimation !== undefined
) {
animation = this.animationBuilder.build(this.animateInAnimation);
} else {
animation = this.animationBuilder.build([
style({ opacity: 0, transform: 'translateX(-100px)' }),
animate(
'1200ms cubic-bezier(0.35, 0, 0.25, 1)',
style({ opacity: 1, transform: 'translateX(0)' })
),
]);
}
this.player = animation.create(this.el.nativeElement);
this.player.init();
}
private animate(): void {
const inView = this.isInViewport();
if (!inView) this.animating = false;
if (!inView || this.animating) return;
this.player.play();
this.animating = true;
}
private isInViewport(): boolean {
const bounding = this.el.nativeElement.getBoundingClientRect();
let top =
bounding.top -
(window.innerHeight || document.documentElement.clientHeight);
let bottom = bounding.top + bounding.height + this.defaults.offset;
return top < 0 && bottom > 0;
}
}

看起来像我想要的那样工作；所以我将在此基础上：(