Анимации при переходе между маршрутами

Почему анимации важны?

В веб-разработке анимации — это не просто украшение. Они помогают улучшить восприятие интерфейса, делают переходы между страницами плавными и профессиональными. Представьте, как страницы просто исчезают и появляются без какой-либо связи. Анимация добавляет динамики и придает вашему приложению законченный вид.

Рассмотрим, как это работает в контексте маршрутизации. В React мы часто используем библиотеку React Router для управления маршрутами. Она позволяет определять разные пути и компоненты для них, но сами переходы происходят мгновенно. Мы хотим добавить к этому плавность и стиль.

Шаги для добавления анимаций

1. Установка библиотек.
Для начала, нам понадобится библиотека React Transition Group. Она предоставляет инструменты для управления состояниями элементов — когда они добавляются, удаляются или изменяются.

npm install react-transition-group

2. Создание маршрутов.
Используйте React Router для настройки маршрутов. Например, у вас есть три страницы: Home, About и Contact. Сначала настройте базовые маршруты:

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';



function App() {

  return (

    <Router>

      <Routes>

        <Route path="/" element={<Home />} />

        <Route path="/about" element={<About />} />

        <Route path="/contact" element={<Contact />} />

      </Routes>

    </Router>

  );

}

Теперь ваш проект готов для добавления анимаций.

3. Внедрение анимаций.
Здесь в игру вступает библиотека React Transition Group. Мы будем использовать компонент CSSTransition, чтобы задавать стили анимаций. Этот компонент управляет добавлением и удалением CSS-классов на основе текущего состояния элемента.

Обновите код, чтобы включить анимацию:

import { BrowserRouter as Router, Route, Routes, useLocation } from 'react-router-dom';

import { CSSTransition, TransitionGroup } from 'react-transition-group';



function App() {

  const location = useLocation();



  return (

    <TransitionGroup>

      <CSSTransition key={location.key} classNames="fade" timeout={300}>

        <Routes location={location}>

          <Route path="/" element={<Home />} />

          <Route path="/about" element={<About />} />

          <Route path="/contact" element={<Contact />} />

        </Routes>

      </CSSTransition>

    </TransitionGroup>

  );

}

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

Настройка стилей для анимаций

Создайте CSS-файл для управления переходами. Например, для класса fade добавьте следующее:

.fade-enter {

  opacity: 0;

  transform: scale(0.9);

}

.fade-enter-active {

  opacity: 1;

  transform: scale(1);

  transition: opacity 300ms, transform 300ms;

}

.fade-exit {

  opacity: 1;

  transform: scale(1);

}

.fade-exit-active {

  opacity: 0;

  transform: scale(0.9);

  transition: opacity 300ms, transform 300ms;

}

Эти классы автоматически применяются к вашим компонентам в зависимости от их состояния: входа (enter), активного перехода (enter-active), выхода (exit) и активного выхода (exit-active).