在Angular中向下滚动div动画

Question

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

myCode

@HostListener('window:scroll', ['$event'])
  onWindowScroll(e) {
    const box = document.querySelector('.box');
    if (window.pageYOffset < box.clientHeight ) {
      box.classList.add('colorChange');
    } else {
      box.classList.remove('colorChange');
    }
  }

.container{
  text-align: center;
  margin: auto;
  padding-top: 768px;
}
.box{
  background: #007aff;
  width: 200px;
  height: 200px;
  display: block;
  word-spacing: 30px;
  line-height: 30px;
  margin: 30px auto;
}
.colorChange{
  background: #fcad2e;
  animation: fade-in 1s ease-in-out;
}
@keyframes fade-in {
  from{
    opacity: 0;
    transform: translateY(50px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Answer 1

这通过专门添加一个窗口滚动事件侦听器来工作。

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');
    }
  });
  }
  }

Here's link to working example