Интеграция с React

Для работы с библиотекой AOS в React необходимо сначала установить пакет через npm или yarn:

npm install aos --save

или

yarn add aos

После установки нужно импортировать стили и саму библиотеку в главный файл компонента, например, в App.js:

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

Инициализация происходит внутри хука useEffect, чтобы AOS корректно работал после рендера компонентов:

function App() {
  useEffect(() => {
    AOS.init({
      duration: 1200, // Продолжительность анимации в миллисекундах
      once: true,     // Анимация проигрывается только один раз при скролле
      mirror: false,  // Анимация проигрывается при скролле вверх
    });
  }, []);

  return (
    <div>
      {/* Компоненты с анимацией */}
    </div>
  );
}

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

Для применения анимации к элементам React достаточно добавить специальные data-* атрибуты. Основные атрибуты:

  • data-aos – тип анимации (fade, fade-up, fade-down, zoom-in и другие).
  • data-aos-duration – индивидуальная продолжительность анимации в миллисекундах.
  • data-aos-delay – задержка перед запуском анимации.
  • data-aos-offset – смещение срабатывания анимации относительно верхнего края окна.
  • data-aos-once – проигрывать анимацию только один раз.

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

<div data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200">
  Контент с анимацией
</div>

Можно комбинировать несколько атрибутов для тонкой настройки:

<div
  data-aos="zoom-in"
  data-aos-duration="1500"
  data-aos-offset="200"
  data-aos-once="true"
>
  Другой элемент
</div>

Анимация списков и динамического контента

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

import { useEffect } from 'react';

function ItemList({ items }) {
  useEffect(() => {
    AOS.refresh(); // Обновляет анимации после рендера динамических элементов
  }, [items]);

  return (
    <div>
      {items.map((item, index) => (
        <div key={index} data-aos="fade-right">
          {item}
        </div>
      ))}
    </div>
  );
}

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

Комбинация с CSS-модулями и styled-components

AOS корректно работает с любыми методами стилизации React, включая CSS-модули и styled-components. Главное – правильно подключить стили AOS и не переопределять их без необходимости. Пример с styled-components:

import styled from 'styled-components';

const Box = styled.div`
  width: 200px;
  height: 200px;
  background-color: coral;
  margin: 20px;
`;

function AnimatedBox() {
  useEffect(() => {
    AOS.init({ duration: 800 });
  }, []);

  return <Box data-aos="flip-left" />;
}

Управление повторным запуском анимаций

Параметр mirror позволяет повторять анимацию при прокрутке обратно вверх. В React можно комбинировать его с условной отрисовкой компонентов:

function ScrollSection({ show }) {
  useEffect(() => {
    AOS.refresh();
  }, [show]);

  return show ? (
    <div data-aos="fade-up" data-aos-mirror="true">
      Секция с анимацией
    </div>
  ) : null;
}

Инициализация AOS с глобальными настройками

Для крупных проектов удобно создать отдельный файл конфигурации, чтобы использовать одни и те же настройки AOS во всем приложении:

// aosConfig.js
import AOS from 'aos';
import 'aos/dist/aos.css';

export const initAOS = () => {
  AOS.init({
    duration: 1000,
    easing: 'ease-in-out',
    once: false,
    offset: 120,
  });
};

И подключать в App.js:

import { initAOS } from './aosConfig';

useEffect(() => {
  initAOS();
}, []);

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

Интеграция с React Router

Если приложение использует маршрутизацию, важно обновлять анимации при смене страниц, так как новые компоненты появляются после перехода:

import { useLocation } from 'react-router-dom';

function AnimatedRoutes() {
  const location = useLocation();

  useEffect(() => {
    AOS.refresh();
  }, [location.pathname]);

  return (
    <Routes location={location}>
      {/* маршруты с анимированными компонентами */}
    </Routes>
  );
}

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

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

  • Использовать once: true для элементов, которые не требуют повторной анимации.
  • Минимизировать количество элементов с тяжелыми эффектами на странице.
  • Для списков и таблиц применять анимацию только к видимым элементам с помощью виртуализации (react-window, react-virtualized).

Поддержка TypeScript

AOS можно использовать с TypeScript, добавив типы:

import AOS, { AosOptions } from 'aos';

const options: AosOptions = {
  duration: 800,
  once: true,
};

useEffect(() => {
  AOS.init(options);
}, []);

Это обеспечивает автодополнение и строгую проверку параметров, повышая надежность кода.

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

Оглавление