React Transition Group与React Router集成完全指南：实现丝滑页面切换动画

gitblog_00060

734人浏览 · 2025-11-18 00:40:33

gitblog_00060 · 2025-11-18 00:40:33 发布

React Transition Group与React Router集成完全指南：实现丝滑页面切换动画

【免费下载链接】react-transition-group An easy way to perform animations when a React component enters or leaves the DOM 项目地址: https://gitcode.com/gh_mirrors/re/react-transition-group

React Transition Group是一个强大的React动画组件库，专门用于管理组件状态随时间变化的过程，特别适合实现页面切换动画效果。当与React Router结合使用时，可以为单页面应用带来流畅的页面过渡体验。

为什么选择React Transition Group？

React Transition Group提供了四个核心组件：Transition、CSSTransition、SwitchTransition和TransitionGroup。这些组件帮助你管理组件的进入和退出状态，而不强制具体的动画实现方式，让你可以自由选择CSS过渡、CSS动画或JavaScript动画。

安装与基础配置

首先，安装React Transition Group：

npm install react-transition-group

然后安装React Router（如果尚未安装）：

npm install react-router-dom

核心集成方案

1. 基础页面过渡实现

在React Router应用中集成页面过渡动画的基本思路是使用CSSTransition组件包裹Routes组件：

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

function App() {
  const location = useLocation();
  
  return (
    <TransitionGroup>
      <CSSTransition
        key={location.key}
        timeout={300}
        classNames="page"
        unmountOnExit
      >
        <Routes location={location}>
          <Route path="/" element={<HomePage />} />
          <Route path="/about" element={<AboutPage />} />
          <Route path="/contact" element={<ContactPage />} />
        </Routes>
      </CSSTransition>
    </TransitionGroup>
  );
}

2. CSS动画样式配置

创建对应的CSS样式来实现平滑的过渡效果：

.page-enter {
  opacity: 0;
  transform: translateX(100%);
}

.page-enter-active {
  opacity: 1;
  transform: translateX(0%);
  transition: opacity 300ms, transform 300ms;
}

.page-exit {
  opacity: 1;
  transform: translateX(0%);
}

.page-exit-active {
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity 300ms, transform 300ms;
}

高级动画技巧

不同类型的页面过渡

你可以为不同的路由路径创建不同的动画效果：

<CSSTransition
  key={location.key}
  timeout={300}
  classNames={getTransitionClass(location.pathname)}
  unmountOnExit
>
  <Routes location={location}>
    {/* 路由配置 */}
  </Routes>
</CSSTransition>

嵌套路由动画处理

对于嵌套路由，可以使用SwitchTransition组件来处理组件替换动画：

import { SwitchTransition, CSSTransition } from 'react-transition-group';

function NestedComponent() {
  return (
    <SwitchTransition mode="out-in">
      <CSSTransition
        key={currentView}
        timeout={200}
        classNames="fade"
      >
        <div>
          {/* 根据状态显示不同内容 */}
        </div>
      </CSSTransition>
    </SwitchTransition>
  );
}

性能优化建议

使用unmountOnExit：确保组件在动画结束后被卸载，减少DOM节点数量
合理设置timeout：匹配CSS过渡时间，避免动画中断
避免过度动画：复杂的动画可能会影响页面性能
使用nodeRef：避免使用已弃用的ReactDOM.findDOMNode

常见问题解决

动画闪烁问题

如果遇到动画闪烁，可以尝试在CSS中添加：

.page {
  position: absolute;
  width: 100%;
  height: 100%;
}

路由参数变化处理

当只有路由参数变化时，需要确保动画正常触发：

const location = useLocation();
const [displayLocation, setDisplayLocation] = useState(location);

useEffect(() => {
  if (location.pathname !== displayLocation.pathname) {
    setDisplayLocation(location);
  }
}, [location]);