通过路由更改页面时反应 CSSTransition

Question

我正在使用 CSSTransition，它与组件配合使用效果惊人：

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

我想知道当我 Route 的页面 open/close 时是否可以使用 CSSTransition 进行良好的过渡：

<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;

通过路由更改页面时反应 CSSTransition

React CSSTransition when you change page by Route

javascript

reactjs

react-router

reactcsstransitiongroup

page-transition