Этот вопрос проверяет знание способов добавления анимации к маршрутам
Анимации переходов между маршрутами в React Router DOM реализуются с использованием библиотеки react-transition-group или фреймворков, таких как Framer Motion. Компоненты маршрутов оборачиваются в контейнер с анимацией.
Установка react-transition-group:
npm install react-transition-groupПример с анимацией:
Настройте маршруты с анимацией:
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import { Routes, Route, useLocation } from 'react-router-dom';
import './animations.css';
const AnimatedRoutes = () => {
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 />} />
</Routes>
</CSSTransition>
</TransitionGroup>
);
};Добавьте CSS для анимации:
.fade-enter {
opacity: 0;
}
.fade-enter-active {
opacity: 1;
transition: opacity 300ms;
}
.fade-exit {
opacity: 1;
}
.fade-exit-active {
opacity: 0;
transition: opacity 300ms;
}Использование Framer Motion:
Более гибкий способ:
import { motion } from 'framer-motion';
const AnimatedPage = ({ children }) => (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
>
{children}
</motion.div>
);Итог: Анимация маршрутов позволяет сделать приложение более плавным и интерактивным.