Javascript 角度2：在滚动上设置动画

提供了一个很好的解决方案，介绍了如何以角度方式检测视口中的元素

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

这将为我提供一个简单的角度滚动动画功能，而不需要外部LIB

但我还不能让它完全工作：

要添加的CSS动画：

/*----------------------------------------------
*由万物有灵论者产生
* ---------------------------------------------- */
.滑盖{
-webkit动画：滑动顶部0.5s立方贝塞尔（0.250、0.460、0.450、0.940）二者；
动画：滑动顶部0.5s三次贝塞尔（0.250、0.460、0.450、0.940）二者；
}
@-webkit关键帧滑盖{
0% {
-webkit转换：translateY（0）；
变换：translateY（0）；
}
100% {
-webkit转换：translateY（-100px）；
转换：translateY（-100px）；
}
}
@关键帧滑动顶部{
0% {
-webkit转换：translateY（0）；
变换：translateY（0）；
}
100% {
-webkit转换：translateY（-100px）；
转换：translateY（-100px）；
}
}

要将css添加到的HTML：

要旋转的我的div

TS:

构造函数（私有呈现器：Renderer2）{
public\u visibilityChangeHandler（nativeElement:any）{
如果（nativeElement）{
this.renderer.addClass（nativeElement，“幻灯片顶部”）；
}
}}

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

import{AfterViewInit，Directive，ElementRef，EventEmitter，Host，ondestory，Output}来自“@angular/core”；
@指示({
选择器：“[输入ViewPortNotifier]”
})
导出类在ViewInit、OnDestroy之后进入ViewPortNotifierDirective实现{
@Output（）visibilityChange:EventEmitter=新的EventEmitter（）；
私有观察者：IntersectionObserver；
构造函数（@Host（）private _elementRef:elementRef）{}
ngAfterViewInit（）：void{
常量选项={
root:null，
rootMargin:“0px”，
阈值：0.0
};
this.\u observer=新的IntersectionObserver（this.\u回调，选项）；
观察者观察（本元素参考nativeElement）；
}
恩贡德斯特罗（）{
这是。_observer.disconnect（）；
}
私有回调=（条目，观察者）=>{
entries.forEach（entry=>{
log（entry.isIntersecting？'I am visible'：'I am not visible'）；
this.visibilityChange.emit（entry.isIntersecting？this.\u elementRef.nativeElement:null）
});
};
}

---

这似乎可行，但动画只会播放一次。你知道我如何在重新滚动到该区域时重播动画吗？我想不出如何删除/读取css类；/有什么想法吗？

您需要在元素不在视口中时移除类。是否尝试角度动画？。如果您声明一个变量并使用

isVisible获取值'HIDDEN'和'VISIBLE'，您需要在元素不在viewportal时删除类是否尝试角度动画？。如果声明变量并使用

isVisible，则获取值“HIDDEN”和“VISIBLE”