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

Библиотека AOS (Animate on Scroll) позволяет создавать плавные анимации при прокрутке страницы. В стандартном использовании достаточно инициализации через AOS.init(), однако динамические изменения DOM требуют дополнительного управления состоянием анимаций с помощью методов refresh и refreshHard.

Метод refresh

Метод refresh обновляет внутренние данные AOS о позициях элементов на странице. Он не пересоздаёт полностью анимации, а только проверяет их текущие координаты и видимость.

Сценарии использования refresh:

  1. Динамическое добавление элементов в DOM

    const newElement = document.createElement('div');
newElement.setAttribute('data-aos', 'fade-up');
document.body.appendChild(newElement);
AOS.refresh();

    После добавления нового элемента refresh пересчитывает его положение, чтобы анимация сработала при скролле.

  2. Изменение размера или положения существующих элементов Например, при разворачивании аккордеона или изменении контента, влияющем на высоту блока, вызов refresh позволяет корректно определить момент срабатывания анимации.

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

  • Быстрый и лёгкий по сравнению с refreshHard.
  • Не уничтожает предыдущие состояния анимаций.
  • Подходит для большинства изменений DOM, не требующих полной переинициализации.

Метод refreshHard

Метод refreshHard выполняет полную переинициализацию библиотеки. Он удаляет все текущие слушатели событий и перезапускает процесс анимации так, как если бы AOS.init() вызывался заново.

Сценарии использования refreshHard:

  1. Серьёзные изменения DOM Когда структура страницы полностью меняется (например, переключение вкладок с большим количеством контента или динамическая подгрузка большого количества элементов).

  2. Проблемы с некорректным отображением анимаций Если refresh не исправляет поведение, например, элементы остаются невидимыми или анимации не срабатывают, refreshHard гарантирует, что все элементы будут пересчитаны.

Пример использования refreshHard:

// Полностью заменяем контент секции
const section = document.querySelector('.dynamic-section');
section.innerHTML = '<div data-aos="fade-right">Новый контент</div>';
AOS.refreshHard();

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

  • Более ресурсоёмкий, чем refresh.
  • Полностью пересоздаёт внутренние объекты и слушатели событий.
  • Рекомендуется использовать только при значительных изменениях DOM, иначе возможны лишние затраты производительности.

Сравнение refresh и refreshHard

Параметр refresh refreshHard
Тип обновления Пересчёт координат элементов Полная переинициализация библиотеки
Скорость Быстро Медленнее
Влияние на состояние анимаций Сохраняет текущие анимации Уничтожает и создаёт заново
Использование Лёгкие изменения DOM, добавление новых элементов Глобальные изменения DOM или исправление ошибок анимации

Рекомендации по применению

  • Использовать refresh при добавлении новых элементов или изменении размеров существующих блоков.
  • Использовать refreshHard при полной перестройке контента страницы или когда анимации перестают корректно работать после изменений DOM.
  • Минимизировать количество вызовов refreshHard на одной странице, чтобы не перегружать рендеринг и обработку событий.

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

Оглавление