Метод refreshHard

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

Основное назначение

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

  • Подгрузка контента через AJAX или Fetch.
  • Динамическое создание элементов с помощью JavaScript.
  • Изменение размеров блоков после применения сторонних библиотек или пользовательских скриптов.
  • Переход на новую страницу с использованием SPA-фреймворков.

Синтаксис

AOS.refreshHard();
  • Метод не принимает аргументов.
  • Возвращаемое значение отсутствует (undefined).
  • Полностью пересчитывает позиции всех элементов с атрибутом data-aos на странице.

Взаимодействие с другими методами

Библиотека AOS предоставляет следующие методы:

  • AOS.init(options) – инициализация с настройками.
  • AOS.refresh() – частичное обновление позиций элементов.
  • AOS.refreshHard() – полное обновление всех элементов и их конфигураций.

При изменении DOM предпочтительно использовать refreshHard, чтобы гарантировать корректное отображение анимаций. После вызова метода автоматически пересчитываются offset, delay, duration, easing и все другие параметры, заданные через data-aos-* атрибуты.

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

Динамическая подгрузка элементов:

fetch('/api/articles')
  .then(response => response.json())
  .then(data => {
    const container = document.querySelector('#articles');
    data.forEach(item => {
      const article = document.createElement('div');
      article.classList.add('article');
      article.setAttribute('data-aos', 'fade-up');
      article.innerHTML = `<h2>${item.title}</h2><p>${item.content}</p>`;
      container.appendChild(article);
    });
    // Полное обновление анимаций после добавления элементов
    AOS.refreshHard();
  });

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

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

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

  • Добавлении новых элементов.
  • Изменении размеров контейнеров.
  • Полной динамической перестройке DOM.

Важные моменты и рекомендации

  1. Производительность: частый вызов refreshHard на больших страницах с сотнями анимированных элементов может замедлить работу страницы. Оптимальнее вызывать метод один раз после массовых изменений DOM.
  2. Инициализация: перед использованием refreshHard библиотека должна быть инициализирована через AOS.init().
  3. Совместимость с SPA: при переходе между страницами без полной перезагрузки вызов refreshHard необходим для корректного срабатывания анимаций на новых элементах.
  4. Динамические размеры: если элементы меняют высоту или ширину после загрузки (например, через изображения или шрифты), метод refreshHard гарантирует точный расчёт позиций.

Поддержка параметров data-aos-*

При вызове refreshHard библиотека заново считывает все атрибуты:

  • data-aos – тип анимации.
  • data-aos-offset – смещение анимации от верха окна.
  • data-aos-delay – задержка перед анимацией.
  • data-aos-duration – длительность анимации.
  • data-aos-easing – функция плавности анимации.
  • data-aos-once – флаг выполнения анимации один раз.

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

Заключение по использованию метода

Метод refreshHard является незаменимым инструментом при работе с динамическим контентом и сложными интерфейсами, где позиция и параметры анимаций могут изменяться. Он обеспечивает стабильное и предсказуемое поведение анимаций, независимо от изменений DOM или стилей элементов. Правильное использование refreshHard позволяет интегрировать AOS в современные SPA и динамические сайты с полной поддержкой плавных анимаций.

Оглавление