Реинициализация при динамическом контенте

Для работы с AOS необходимо подключить библиотеку через <link> и <script> в HTML либо через пакетный менеджер (npm/yarn) для использования в сборщиках типа Webpack или Vite. Базовая инициализация выглядит следующим образом:

AOS.init({
  offset: 120,       // Смещение до запуска анимации
  delay: 0,          // Задержка перед началом анимации
  duration: 400,     // Длительность анимации
  easing: 'ease',    // Функция плавности
  once: true,        // Анимация срабатывает один раз
  mirror: false      // Анимация повторяется при прокрутке вверх
});

При первой загрузке страницы AOS автоматически определяет все элементы с атрибутом data-aos и применяет к ним заданные эффекты анимации.

Проблема динамического контента

Когда элементы добавляются на страницу после первоначальной загрузки (например, через AJAX, fetch или рендер компонентов в SPA), AOS не видит новые элементы. Это связано с тем, что библиотека сканирует DOM только один раз при вызове AOS.init().

Пример динамического добавления элемента:

const container = document.querySelector('#dynamic-container');

const newItem = document.createElement('div');
newItem.classList.add('item');
newItem.setAttribute('data-aos', 'fade-up');
newItem.textContent = 'Новый элемент';

container.appendChild(newItem);

После этого элемент на странице визуально присутствует, но анимация не срабатывает, так как библиотека о нём не знает.

Реинициализация AOS

Для того чтобы анимации применялись к новым элементам, необходимо использовать методы AOS.refresh() и AOS.refreshHard().

1. AOS.refresh()

Метод обновляет внутренние данные о позициях элементов и пересчитывает точки срабатывания анимации. Используется, когда DOM изменился и нужно применить анимации к новым или перемещённым элементам:

AOS.refresh();

Пример с динамическим контентом:

fetch('/api/items')
  .then(res => res.json())
  .then(data => {
    data.forEach(item => {
      const el = document.createElement('div');
      el.setAttribute('data-aos', 'fade-right');
      el.textContent = item.name;
      document.querySelector('#list').appendChild(el);
    });
    AOS.refresh(); // Реинициализация после добавления элементов
  });

2. AOS.refreshHard()

Метод выполняет полное пересоздание списка элементов и сбрасывает внутренние кеши AOS. Используется в случаях, когда простого refresh() недостаточно, например, при массовых изменениях DOM или удалении большого числа элементов.

AOS.refreshHard();

Автоматическая реинициализация при динамических событиях

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

function addAnimatedItem(content) {
  const el = document.createElement('div');
  el.setAttribute('data-aos', 'zoom-in');
  el.textContent = content;
  document.body.appendChild(el);
  AOS.refresh();
}

Для интеграции с библиотеками типа React или Vue чаще используют эффект после рендера компонента:

React пример:

import { useEffect } from 'react';
import AOS from 'aos';
import 'aos/dist/aos.css';

function ItemList({ items }) {
  useEffect(() => {
    AOS.refresh();
  }, [items]);

  return (
    <div>
      {items.map(item => (
        <div key={item.id} data-aos="fade-up">{item.name}</div>
      ))}
    </div>
  );
}

Практические советы при динамическом контенте

  1. Инициализация один раз AOS.init() вызывается при загрузке страницы, повторный вызов не обязателен. Для динамических элементов достаточно AOS.refresh().

  2. Выбор между refresh и refreshHard

    • refresh() — при добавлении небольшого количества элементов.
    • refreshHard() — при массовом изменении DOM, полной перестройке контейнеров.

  3. Порядок действий Всегда добавлять новые элементы в DOM перед вызовом AOS.refresh(), иначе анимации не применятся.

  4. События динамической подгрузки Можно слушать события AJAX, fetch, или MutationObserver для автоматического вызова AOS.refresh() при изменении структуры страницы.

Оптимизация производительности

Частый вызов AOS.refresh() может снижать производительность, особенно на страницах с большим количеством элементов. Рекомендуется:

  • Использовать requestAnimationFrame или setTimeout для пакетной реинициализации элементов.
  • Сконцентрировать вызов refresh() на конце операций добавления, а не после каждого отдельного элемента.
  • При динамическом контенте с бесконечной прокруткой — вызывать AOS.refresh() только для новых блоков, а не всей страницы.

Использование с виртуальными списками

Для приложений с виртуализированными списками (react-virtualized, vue-virtual-scroller) необходимо комбинировать AOS с обработкой появления элементов в viewport. Реинициализация AOS должна выполняться после рендера видимой части списка:

function onVirtualListUpdate() {
  // Только что отрендеренные элементы
  AOS.refresh();
}

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

Ключевые атрибуты для динамических элементов

При добавлении динамических элементов следует обязательно указывать:

  • data-aos — тип анимации (fade-up, zoom-in, slide-left и др.)
  • data-aos-delay — задержка перед анимацией
  • data-aos-duration — длительность анимации
  • data-aos-offset — смещение срабатывания

Пример:

const el = document.createElement('div');
el.setAttribute('data-aos', 'fade-up');
el.setAttribute('data-aos-delay', '100');
el.setAttribute('data-aos-duration', '600');
el.textContent = 'Анимированный элемент';
document.body.appendChild(el);
AOS.refresh();

Реинициализация AOS при динамическом контенте позволяет интегрировать анимации плавно, независимо от способа рендера элементов, сохраняя контроль над производительностью и визуальным эффектом.

Оглавление