Интеграция с Angular

Для использования библиотеки AOS (Animate on Scroll) в Angular-проекте необходимо установить пакет через npm:

npm install aos --save

После установки подключение стилей и скриптов можно выполнить несколькими способами:

  1. Через angular.json: В секцию styles добавляется путь к CSS AOS, а в scripts — путь к JS.
"styles": [
  "src/styles.css",
  "node_modules/aos/dist/aos.css"
],
"scripts": [
  "node_modules/aos/dist/aos.js"
]
  1. Через импорт в Angular компонент: Можно импортировать CSS и JS прямо в main.ts или в нужный компонент:
import 'aos/dist/aos.css';
import * as AOS from 'aos';

Инициализация AOS

Инициализация библиотеки должна происходить после того, как Angular полностью загрузит DOM. Обычно это выполняется в ngOnInit или ngAfterViewInit:

import { Component, AfterViewInit } from '@angular/core';
import * as AOS from 'aos';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {

  ngAfterViewInit(): void {
    AOS.init({
      // Настройки по умолчанию
      duration: 1200, // продолжительность анимации в миллисекундах
      easing: 'ease-in-out', // тип анимации
      once: true, // анимация срабатывает один раз
      mirror: false // анимация повторяется при прокрутке вверх
    });
  }
}

Особенности использования в Angular:

  • ngAfterViewInit предпочтительнее, чем ngOnInit, так как гарантирует, что все элементы DOM уже доступны.
  • Если контент добавляется динамически через *ngFor, необходимо вызывать AOS.refresh() после изменения DOM:
this.items.push(newItem);
AOS.refresh();

Применение атрибутов AOS в шаблоне

Каждому элементу, который должен анимироваться, добавляется атрибут data-aos с типом анимации:

<div data-aos="fade-up">
  Появляющийся блок
</div>

<div data-aos="zoom-in" data-aos-delay="300">
  Блок с задержкой
</div>

Ключевые атрибуты:

  • data-aos: тип анимации (fade-up, fade-down, zoom-in, flip-left и др.).
  • data-aos-duration: время анимации в миллисекундах.
  • data-aos-delay: задержка перед запуском анимации.
  • data-aos-offset: смещение триггера появления от верха экрана.
  • data-aos-easing: тип функции ускорения (linear, ease-in, ease-out, ease-in-out).
  • data-aos-once: срабатывание анимации один раз или при каждой прокрутке.

Динамическое обновление анимаций

В Angular проекты часто генерируют контент динамически. Для корректного отображения анимаций необходимо после добавления элементов вызывать метод AOS.refresh():

loadMoreItems() {
  this.items.push(...newItems);
  setTimeout(() => {
    AOS.refresh();
  }, 100);
}

Использование setTimeout помогает дать Angular время для рендеринга новых элементов.

Кастомизация анимаций

AOS позволяет настроить глобальные параметры и локальные для отдельных элементов:

AOS.init({
  offset: 200, // смещение начала анимации
  delay: 100,  // задержка по умолчанию
  duration: 800, // продолжительность
  easing: 'ease-in-sine',
  once: false,
  mirror: true
});

Для отдельных блоков можно переопределять параметры через атрибуты:

<div data-aos="fade-right" data-aos-duration="1500" data-aos-delay="500">
  Кастомная анимация
</div>

Интеграция с Angular Material и другими компонентами

При использовании сторонних библиотек, которые динамически создают DOM (например, Angular Material, ng-bootstrap, PrimeNG), важно вызывать AOS.refresh() после появления новых компонентов. Это обеспечивает правильное вычисление позиции элементов на странице.

ngAfterViewChecked() {
  AOS.refresh();
}

Использование ngAfterViewChecked подходит для сложных страниц, но нужно учитывать производительность — частые вызовы могут замедлить страницу.

Ленивая загрузка и AOS

Для страниц с большим количеством контента и ленивой загрузкой (lazy loading) рекомендуется инициализировать AOS после подгрузки каждого фрагмента:

onLazyLoadComplete() {
  AOS.refresh();
}

Это гарантирует, что новые элементы корректно анимируются при прокрутке.

Совместимость с Angular Universal

При использовании Angular Universal (SSR) необходимо проверять наличие window, так как AOS использует DOM:

import { isPlatformBrowser } from '@angular/common';
import { PLATFORM_ID, Inject } from '@angular/core';

constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

ngAfterViewInit() {
  if (isPlatformBrowser(this.platformId)) {
    AOS.init();
  }
}

Это предотвращает ошибки при серверной сборке, где window и document недоступны.

Итоговые рекомендации

  • Инициализация через ngAfterViewInit.
  • Использование AOS.refresh() при динамическом контенте.
  • Комбинирование глобальных настроек и локальных атрибутов.
  • Проверка платформы для SSR.
  • Контроль производительности при частых вызовах AOS.refresh().

Такой подход обеспечивает стабильную работу анимаций на прокрутке в любых Angular-проектах.

Оглавление