Прокрутите вниз анимацию div в Angular

Question

Как анимировать каждое окно при прокрутке вниз, поле будет анимировано как постепенное появление, если прокрутить до страницы .box YOffset 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');
    }
  });
  }
  }

Вот ссылка на рабочий пример