Автоматическое обновление при изменении DOM

Библиотека AOS (Animate on Scroll) изначально инициализируется на момент загрузки страницы с помощью функции AOS.init(). В стандартной конфигурации она сканирует DOM на наличие элементов с атрибутами data-aos и применяет к ним анимации при прокрутке. Однако в современных веб-приложениях структура DOM часто изменяется динамически — элементы добавляются, удаляются или изменяются через JavaScript. В таких случаях стандартная инициализация AOS не успевает отследить новые элементы, и анимации не срабатывают. Для корректной работы требуется автоматическое обновление состояния AOS после изменений DOM.

Метод AOS.refresh()

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

// Добавление нового элемента через JS
const newElement = document.createElement('div');
newElement.setAttribute('data-aos', 'fade-up');
newElement.textContent = 'Новый элемент';
document.body.appendChild(newElement);

// Обновление AOS
AOS.refresh();

Особенности метода:

  • Пересоздаёт внутренние списки элементов с data-aos.
  • Обновляет позиции элементов для правильного срабатывания при прокрутке.
  • Не требует повторной инициализации библиотеки через AOS.init().
  • Работает эффективно даже при добавлении большого числа элементов, но частое вызовы refresh() на каждой мелкой модификации могут снижать производительность.

Метод AOS.refreshHard()

В случаях глобальных изменений DOM можно использовать более «жёсткий» метод — AOS.refreshHard(). В отличие от refresh(), он полностью сбрасывает внутренние структуры AOS и повторно инициализирует все элементы.

AOS.refreshHard();

Когда использовать:

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

Особенности:

  • Более ресурсоёмкий метод, чем refresh().
  • Перезапускает все текущие анимации, поэтому может быть заметен визуально на странице.

Автоматическое отслеживание изменений через MutationObserver

Для динамических приложений удобно настроить автоматическое обновление AOS без ручного вызова refresh(). Для этого используется MutationObserver, встроенный в JavaScript. Он позволяет отслеживать изменения DOM и реагировать на добавление новых элементов.

const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
        if (mutation.addedNodes.length) {
            AOS.refresh();
        }
    });
});

observer.observe(document.body, {
    childList: true,
    subtree: true
});

Пояснение:

  • childList: true отслеживает добавление или удаление дочерних элементов.
  • subtree: true позволяет отслеживать изменения на всех уровнях вложенности.
  • Внутри коллбэка вызывается AOS.refresh() только если новые элементы добавлены, что снижает лишние вызовы и нагрузку.

Комбинирование с динамическими библиотеками

Часто динамический контент добавляется через популярные библиотеки и фреймворки, например:

  • React / Vue / Angular: новые компоненты создаются через рендеринг. В таких случаях AOS.refresh() можно вызывать в lifecycle-методах после монтирования компонентов (componentDidMount в React, mounted в Vue).
  • jQuery: после вставки элементов через .append() или .html() можно сразу вызывать AOS.refresh() для корректного отображения анимаций.
// jQuery пример
$('#container').append('<div data-aos="fade-left">Новый блок</div>');
AOS.refresh();

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

При больших объёмах динамически добавляемых элементов частое обновление AOS может снижать плавность страницы. Для оптимизации рекомендуется:

  1. Дебаунсинг вызовов refresh() Использовать задержку или throttle, чтобы не вызывать обновление слишком часто:
let refreshTimeout;
const refreshAOS = () => {
    clearTimeout(refreshTimeout);
    refreshTimeout = setTimeout(() => AOS.refresh(), 100);
};
  1. Обновлять только при необходимости Проверять, действительно ли были добавлены элементы с data-aos перед вызовом refresh().
const newElements = Array.from(mutation.addedNodes).filter(node =>
    node.nodeType === 1 && node.hasAttribute('data-aos')
);
if (newElements.length) AOS.refresh();
  1. Использовать refreshHard() только при глобальных изменениях Для единичных вставок достаточно refresh().

Пример полной автоматизации

// Инициализация AOS
AOS.init({
    duration: 800,
    once: true
});

// Настройка наблюдателя за DOM
const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
        const newAOSNodes = Array.from(mutation.addedNodes).filter(node =>
            node.nodeType === 1 && node.hasAttribute('data-aos')
        );
        if (newAOSNodes.length) {
            AOS.refresh();
        }
    });
});

observer.observe(document.body, { childList: true, subtree: true });

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

Автоматическое обновление AOS является ключевым инструментом при работе с динамическим контентом. Использование методов refresh(), refreshHard() и интеграция с MutationObserver позволяет гарантировать, что все новые элементы с атрибутами data-aos будут анимироваться корректно, вне зависимости от того, как и когда они появились в DOM.

Оглавление