Реагировать на CSSTransition при смене страницы по маршруту

Question

Я использую CSSTransition и он отлично работает с компонентами:

<CSSTransition timeout={330} in={state.isPopupOpen} classNames="popup" unmountOnExit>
    <MyComponent />
</CSSTransition>

Мне было интересно, могу ли я использовать CSSTransition чтобы иметь приятный переход, когда я открываю / закрываю страницу Route:

<BrowserRouter>
    <Switch>
        <Route path="/page1">
            <CSSTransition timeout={330} in={state.isPageOpen} classNames="page" unmountOnExit>
                <Page1 />
            </CSSTransition>
        </Route>
        <Route path="/page2">
            <Page2 />
        </Route>
    <Switch>
</BrowserRouter>

<Link to="/page1">Link example</Link>

Я попробовал безуспешно. Разве нельзя использоватьCSSTransitionтаким образом? У вас есть другое подобное решение?

Answer 1

Благодаря комментарию @xadm я протестировал полезное решение на https://css-tricks.com/animating-between-views-in-react/

Однако с React Router v6 я нашел более простое решение с другой библиотекой Framer Motion ( https://www.framer.com/motion/ ).

Тот же результат, меньше усилий, суммированных во фрагменте кода

      import { AnimatePresence } from 'framer-motion'
import { BrowserRouter, Routes, Route, Link, useLocation } from "react-router-dom";

import { motion } from 'framer-motion'

const PageTransition = (props) => {
  return (
    <motion.div
      {...props}
      initial={{ opacity: 0, x: '50vw' }}
      animate={{ opacity: 1, x: 0 }}
      exit={{ opacity: 0, x: '-50vw' }}
      style={{ position: 'fixed', top: 0, left: 0, width: '100%', height: '100%' }}
      transition={{ type: 'tween', duration: .3 }}
    >
      {props.children}
    </motion.div>
  )
}

const Page1 = (props) => {
  return (
    <PageTransition>
      <h3>Page 1</h3>
      <Link to="/page2">Go to Page 2</Link>
    </PageTransition>
  );
}

const Page2 = (props) => {
  return (
    <PageTransition>
      <h3>Page 2</h3>
      <Link to="/">Go to Page 1</Link>
    </PageTransition>
  );
}

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

  return (
    <AnimatePresence exitBeforeEnter>
      <Routes location={location} key={location.pathname}>
        <Route path="/" element={<Page1 />} />
        <Route path="/page2" element={<Page2 />} />
      </Routes>
    </AnimatePresence>
  );
};

function App() {

  return (
    <BrowserRouter>
      <AnimatedRoutes />
    </BrowserRouter>
  );

}

export default App;