react如何实现跳转过渡

实现跳转过渡的方法

在React中实现页面跳转过渡效果，可以通过以下方法完成：

使用React Router和CSS过渡 React Router结合CSS动画是实现路由跳转过渡的常见方式。在Switch或Routes组件外包裹CSSTransition或TransitionGroup，通过CSS定义进入和离开的动画效果。

import { CSSTransition, TransitionGroup } from 'react-transition-group';
import { Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Route render={({ location }) => (
      <TransitionGroup>
        <CSSTransition
          key={location.key}
          timeout={300}
          classNames="fade"
        >
          <Switch location={location}>
            <Route path="/" exact component={Home} />
            <Route path="/about" component={About} />
          </Switch>
        </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库 Framer Motion提供声明式动画API，可轻松实现复杂过渡效果。通过AnimatePresence组件包裹路由，配合motion.div定义动画属性。

import { AnimatePresence, motion } from 'framer-motion';
import { Route, Switch, useLocation } from 'react-router-dom';

function App() {
  const location = useLocation();
  return (
    <AnimatePresence exitBeforeEnter>
      <Switch location={location} key={location.pathname}>
        <Route path="/" exact>
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
          >
            <Home />
          </motion.div>
        </Route>
      </Switch>
    </AnimatePresence>
  );
}

React Router v6的过渡实现 在v6版本中，可通过useOutlet配合动画库实现嵌套路由过渡：

import { useOutlet, useLocation } from 'react-router-dom';
import { AnimatePresence } from 'framer-motion';

function Layout() {
  const outlet = useOutlet();
  const location = useLocation();
  return (
    <AnimatePresence>
      <motion.div
        key={location.pathname}
        initial={{ x: 100, opacity: 0 }}
        animate={{ x: 0, opacity: 1 }}
        exit={{ x: -100, opacity: 0 }}
      >
        {outlet}
      </motion.div>
    </AnimatePresence>
  );
}

自定义useTransitionHook 封装自定义Hook管理过渡状态，适用于需要精细控制动画的场景：

function usePageTransition() {
  const [isTransitioning, setIsTransitioning] = useState(false);

  const startTransition = useCallback(() => {
    setIsTransitioning(true);
    return new Promise(resolve => {
      setTimeout(() => {
        setIsTransitioning(false);
        resolve();
      }, 500);
    });
  }, []);

  return { isTransitioning, startTransition };
}

使用时在路由跳转前调用startTransition：

const { startTransition } = usePageTransition();

const navigateWithTransition = async (to) => {
  await startTransition();
  navigate(to);
};

注意事项

• 过渡时间需与路由切换同步，避免组件卸载过早导致动画中断
• 对于复杂路由结构，需确保每个路由层级都有唯一的key属性
• 性能优化：对于移动设备，优先使用GPU加速的CSS属性（如transform和opacity）
• 服务端渲染(SSR)场景下，需考虑动画的hydration处理