Навигация с анимациями

TanStack Router предоставляет мощный инструмент для организации маршрутизации в приложениях на JavaScript, включая возможности интеграции анимаций при переходах между страницами. Навигация с анимациями позволяет создать плавный пользовательский опыт и улучшить восприятие структуры приложения. Рассмотрим детально, как настроить анимации при использовании TanStack Router, а также оптимальные подходы к их применению.

Основные принципы анимационной навигации

1. Управление состоянием перехода

TanStack Router использует концепцию transition states, которые позволяют определить, когда компонент монтируется, размонтируется или изменяется. Для реализации анимации необходимо отслеживать эти состояния:

  • entering — компонент только появляется.
  • entered — компонент полностью показан.
  • exiting — компонент начинает уходить.
  • exited — компонент полностью удалён из DOM.

Эти состояния можно использовать для управления стилями CSS или для запуска JavaScript-анимаций.

2. Интеграция с библиотеками анимации

TanStack Router не ограничивает выбор анимационной библиотеки. Наиболее часто применяются:

  • Framer Motion — для декларативных и сложных анимаций.
  • React Transition Group — для управления жизненным циклом компонентов.
  • GSAP — для анимаций с высокой производительностью и контролем таймингов.

Пример базовой интеграции с Framer Motion:

import { motion } from "framer-motion";
import { Outlet, useMatch } from "@tanstack/router";

function AnimatedPage() {
  const match = useMatch();

  return (
    <motion.div
      key={match.id}
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -20 }}
      transition={{ duration: 0.3 }}
    >
      <Outlet />
    </motion.div>
  );
}

В данном примере используется key={match.id}, чтобы анимация срабатывала при смене маршрута, и motion.div для управления состояниями входа и выхода.

Анимации при вложенной маршрутизации

Вложенные маршруты в TanStack Router позволяют создавать комплексные интерфейсы с частичными переходами между страницами. Для анимаций это означает возможность:

  • Анимировать только изменяемую часть интерфейса, не затрагивая родительские компоненты.
  • Разделять анимацию на отдельные уровни маршрутов, используя Outlet на каждом уровне.

Пример использования вложенных анимаций:

function ParentLayout() {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      transition={{ duration: 0.2 }}
    >
      <Outlet />
    </motion.div>
  );
}

function ChildPage() {
  return (
    <motion.div
      initial={{ x: 100 }}
      animate={{ x: 0 }}
      exit={{ x: -100 }}
      transition={{ type: "spring", stiffness: 300 }}
    >
      Содержимое дочернего маршрута
    </motion.div>
  );
}

Такой подход обеспечивает гибкость и позволяет комбинировать разные эффекты для родительских и дочерних компонентов.

Управление анимацией при навигации программно

TanStack Router позволяет навигацию через вызовы функций router.navigate или router.history.push. Для интеграции анимаций важно:

  • Отслеживать момент начала перехода.
  • Активировать анимацию выхода текущего компонента перед изменением маршрута.
  • Плавно показывать новый компонент после завершения анимации выхода.

Пример:

function navigateWithAnimation(router, to) {
  setExitAnimation(true);
  setTimeout(() => {
    router.navigate(to);
    setExitAnimation(false);
  }, 300); // продолжительность анимации выхода
}

Здесь setExitAnimation управляет состоянием выхода компонента, что позволяет синхронизировать маршрутизацию и анимацию.

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

Анимации могут увеличивать нагрузку на DOM и снижать отзывчивость интерфейса. Рекомендуется:

  • Минимизировать количество одновременно анимируемых элементов.
  • Использовать аппаратно ускоренные свойства CSS (transform, opacity) вместо top, left или width.
  • Кэшировать данные маршрутов при повторном посещении для уменьшения задержек при анимации входа.
  • Предварительно загружать компоненты с lazy и Suspense, чтобы анимация не зависела от времени загрузки.

Примеры сложных эффектов

  • Параллакс-переходы: разные слои контента перемещаются с разной скоростью при смене маршрута.
  • Плавное изменение размеров контейнера: можно анимировать высоту или ширину родительского блока для предотвращения «скачков» интерфейса.
  • Комбинированные эффекты: одновременная анимация входа, выхода и затемнения фона.

Реализация требует контроля состояний компонентов на каждом уровне маршрута и синхронизации через таймеры или анимационные хуки.

Заключение по использованию TanStack Router с анимациями

TanStack Router обеспечивает гибкость для реализации сложной анимационной навигации благодаря:

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

Правильная организация компонентов и внимательное управление состояниями анимаций позволяют создавать плавный и профессиональный пользовательский опыт в современных JavaScript-приложениях.

Оглавление