在 Angular 中向下滚动 div animation

Question

How to animate the each box when scrolling down the box will be animate like fade-in, if scroll to the.box pageYOffset 20 that box will be fade-in, I tried with AOS third-party library and its worked fine but i want to know how to do scroll down animation without any third-party library

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

This works by specifically adding a window scroll event listener.

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