Как в angular сделать анимацию при скролле до определённого элемента?

В Angular есть несколько способов добавить анимацию при скролле до определенного элемента. Рассмотрим два из них:

1. Использование директивы HostListener:
- Создайте новую директиву, например, ScrollAnimationDirective, с помощью команды ng generate directive ScrollAnimation.
- В файле директивы scroll-animation.directive.ts добавьте декоратор @HostListener('window:scroll', ['$event']), чтобы перехватывать события скроллинга окна.
- Внутри обработчика события, вы можете получить текущую позицию прокрутки с помощью window.pageYOffset. Далее вы можете проверить, достиг ли пользователь определенного элемента, используя Element.getBoundingClientRect(), чтобы получить позицию элемента относительно окна просмотра.
- Если элемент достигнут, вы можете добавить класс с CSS-анимацией к элементу, чтобы запустить анимацию.
- Затем привяжите директиву к элементу, к которому вы хотите применить анимацию.
Пример кода директивы:

   import { Directive, HostListener, ElementRef } from '@angular/core';

   @Directive({
     selector: '[appScrollAnimation]'
   })
   export class ScrollAnimationDirective {
     constructor(private el: ElementRef) { }

     @HostListener('window:scroll', ['$event'])
     checkScroll() {
       const scrollPosition = window.pageYOffset;
       const elementPosition = this.el.nativeElement.offsetTop;

       if (scrollPosition >= elementPosition) {
         this.el.nativeElement.classList.add('animation-class');
       }
     }
   }

Использование директивы в шаблоне:

   <div appScrollAnimation>Анимируемый элемент</div>

В данном примере при достижении элемента пользователем, будет добавлен класс animation-class к элементу, который содержит CSS-анимацию.

2. Использование библиотеки ng-scrollreveal:
- Установите библиотеку ng-scrollreveal с помощью команды npm install ng-scrollreveal.
- Импортируйте модуль ScrollRevealModule вместе с другими модулями, в разделе imports вашего модуля приложения.
- В шаблоне для элемента, к которому вы хотите применить анимацию, добавьте директиву scrollReveal со свойствами анимации.
Пример использования:

   <div scrollReveal (scroll)="onScroll($event)" [scrollRevealOptions]="{reset: true, origin: 'left', distance: '50px', duration: 2000}">
     Анимируемый элемент
   </div>

В данном примере при скроллинге до этого элемента, будет применена анимация, которая обозначена свойствами origin, distance и duration. Вы также можете настроить другие свойства анимации, указав их в объекте scrollRevealOptions.
В компоненте соответствующим образом обработайте событие скроллинга, например, в методе onScroll().

Это два примера того, как можно добавить анимацию при скролле до определенного элемента в Angular. Выберите тот подход, который лучше всего соответствует вашим потребностям и стилю разработки.