React 路由切换动画过渡效果：打造流畅用户体验

1. 引入 react-transition-group 库

npm install react-transition-group

在你的项目中引入 react-transition-group 库。

2. 使用 CSSTransition 组件

import { CSSTransition } from "react-transition-group";

const RouteTransition = ({ children, location }) => {
  return (
    <CSSTransition
      in={location.pathname === "/page1"}
      timeout={300}
      classNames="page-transition"
    >
      {children}
    </CSSTransition>
  );
};

将 RouteTransition 组件用于包裹需要过渡的组件。

3. 定义过渡动画样式

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

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

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

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

在你的 CSS 文件中添加过渡动画样式。

4. 在路由中使用 RouteTransition

<Route path="/page1" component={RouteTransition} />

在你的路由配置中，使用 RouteTransition 组件包裹需要过渡的路由。

5. 完善细节

根据你的需求，可以进一步完善细节，例如：

• 调整过渡动画的持续时间和缓动函数。
• 根据实际情况，调整过渡动画的样式。
• 结合你的项目实际情况，灵活使用 react-transition-group 库的其他组件和功能。

结语

使用 react-transition-group 库，你可以轻松实现 React 路由切换时的动画过渡效果，提升用户体验，让你的应用更具交互性。希望本文对你有帮助，如果你有任何问题或建议，欢迎在评论区留言。