Метод refresh

Библиотека AOS (Animate on Scroll) предназначена для анимации элементов при прокрутке страницы. Одним из ключевых инструментов управления анимациями является метод refresh. Он обеспечивает синхронизацию состояния анимаций с текущим расположением элементов в DOM и изменениями структуры страницы. Понимание работы refresh необходимо для корректного отображения анимаций при динамическом изменении контента.

Назначение метода

Метод refresh выполняет следующие задачи:

  1. Обновление внутренних данных о позициях элементов AOS хранит координаты элементов, которые должны анимироваться при прокрутке. Если контент страницы изменяется динамически (добавляются новые блоки, изменяются размеры существующих элементов), старые координаты перестают быть актуальными. refresh пересчитывает эти координаты.

  2. Сброс анимаций Метод может быть использован для повторной активации анимаций, которые уже были выполнены, если требуется их повторное отображение при обновлении контента.

  3. Оптимизация производительности AOS не пересчитывает позиции элементов автоматически при каждом изменении DOM. Это снижает нагрузку на рендеринг и делает анимации более плавными. refresh выполняется вручную только при необходимости.

Синтаксис использования

AOS.refresh();

Метод вызывается без аргументов и работает глобально для всех элементов, имеющих атрибут data-aos.

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

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

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

После вызова refresh библиотека пересчитывает координаты нового блока и подключает его к механизму анимации при прокрутке.

Различие между refresh и refreshHard

AOS предоставляет два метода для обновления:

  1. AOS.refresh()

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

  2. AOS.refreshHard()

    • Полностью очищает и повторно инициализирует все элементы с атрибутами data-aos.
    • Пересоздаёт внутренние массивы и добавляет все события заново.
    • Используется при крупных изменениях структуры страницы или после полной перезагрузки динамического контента.

Когда требуется вызов refresh

Метод становится необходимым в следующих ситуациях:

  • Динамическая загрузка контента через AJAX или fetch
  • Добавление новых блоков после инициализации AOS
  • Изменение размеров элементов после изменения CSS или шрифтов
  • Переключение вкладок или секций, когда элементы изначально не видимы

Без вызова refresh новые или изменённые элементы могут не анимироваться, либо анимация будет некорректной из-за устаревших координат.

Взаимодействие с настройками AOS

Метод refresh учитывает текущие глобальные настройки, заданные при инициализации AOS:

AOS.init({
  offset: 200, // смещение перед анимацией
  duration: 800, // продолжительность анимации
  once: true // анимация проигрывается только один раз
});

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

Рекомендации по использованию

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

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

Оглавление