在 React 开发中，路由动画能显著提升用户体验。以下是常见实现方式与技巧：

基础概念

路由动画通过 组件切换时的过渡效果 实现，常用于页面切换、导航栏交互等场景。核心原理是利用 CSS 过渡或动画库控制组件的显示/隐藏状态。

  • 📌 动画类型：淡入淡出（Fade）、滑动（Slide）、缩放（Zoom）等
  • 🚀 实现工具：react-router + react-transition-group 或 framer-motion
  • 📱 浏览器兼容性：需注意 CSS 动画在移动端的性能优化
React_路由动画实现

实现方法

1. 使用 react-transition-group

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

<CSSTransition
  in={isVisible}
  timeout={300}
  classNames="fade"
  unmountOnExit
>
  <div>动画组件</div>
</CSSTransition>

⚠️ 需配合 CSS 类名定义动画效果，如 .fade-enter、.fade-exit

2. framer-motion 动态动画

import { motion } from 'framer-motion';

<motion.div
  initial={{ opacity: 0, x: -100 }}
  animate={{ opacity: 1, x: 0 }}
  exit={{ opacity: 0, x: 100 }}
  transition={{ duration: 0.5 }}
>
  动画内容
</motion.div>

示例代码

// 路由切换时触发动画
<Route
  exact
  render={({ location }) => (
    <div className="page">
      <CSSTransition
        key={location.key}
        timeout={500}
        classNames="slide"
        unmountOnExit
      >
        <Switch location={location}>
          <Route path="/home" component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </CSSTransition>
    </div>
  )}
/>

注意事项

  1. 动画性能：避免过度复杂的动画影响渲染速度
  2. 响应式设计：使用 @media 查询适配移动端
  3. 动画库选择：建议参考 React_动画库 选择最适合的方案
页面过渡动画

扩展阅读

如需深入了解 React 路由动画进阶技巧，可访问 React/路由动画实现进阶技巧 获取更多实践案例。