Javascript 向下滚动角度方向上的div动画

如何在向下滚动时设置每个框的动画框将像淡入一样设置动画， 如果滚动到.box页面偏移20，该框将淡入，我尝试使用AOS第三方库，其工作正常，但我想知道如何在没有任何第三方库的情况下进行向下滚动动画

@HostListener（'窗口：滚动'，['$event']））
onWindowScroll（e）{
const-box=document.querySelector（'.box'）；
if（window.pageYOffset

.container{
文本对齐：居中；
保证金：自动；
填充顶部：768px；
}
.盒子{
背景：#007aff；
宽度：200px；
高度：200px；
显示：块；
字间距：30px；
线高：30px；
保证金：30像素自动；
}
.颜色变化{
背景：#fcad2e；
动画：淡入1s，淡入淡出；
}
@关键帧淡入{
从{
不透明度：0；
变换：translateY（50px）；
}
到{
不透明度：1；
变换：translateY（0）；
}
}

---

这通过专门添加一个窗口滚动事件侦听器来实现

import { Component, VERSION, HostListener } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular " + VERSION.major;
  constructor(){
    window.addEventListener("scroll", (event)=>{
    debugger;
    const box = document.querySelector('.box');
    if (window.pageYOffset < box.clientHeight ) {
      box.classList.add('colorChange');
    } else {
      box.classList.remove('colorChange');
    }
  });
  }
  }

从“@angular/core”导入{Component，VERSION，HostListener}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:[“/app.component.css”]
})
导出类AppComponent{
name=“Angular”+VERSION.major；
构造函数（）{
window.addEventListener（“滚动”，（事件）=>{
调试器；
const-box=document.querySelector（'.box'）；
if（window.pageYOffset

---

如果可能，请使用intersection Oberserver进行此操作。这是正常的。但如果我有多张卡片，每个卡片的类名都有颜色变化，那么如何用相同的类名设置每张卡片的动画我正在尝试向下滚动页面动画