面试题：React中如何使用React Router实现基本的路由动画

Question

假设你正在使用React Router进行前端路由管理，描述一下如何为不同路由之间的切换添加基本的淡入淡出动画效果。请阐述实现思路，并给出关键代码示例。

Answer 1

实现思路

1. 使用CSS的@keyframes规则定义淡入淡出动画。
2. 利用React Router的Routes和Route组件来管理路由。
3. 在路由切换时，通过React的状态管理或者CSS类名的切换，使得新组件淡入，旧组件淡出。

关键代码示例

1. 定义CSS动画

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

2. React组件中使用动画

import React, { useState } from 'react';
import { Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';

const App = () => {
  const [isFading, setIsFading] = useState(false);

  const handleRouteChange = () => {
    setIsFading(true);
    setTimeout(() => {
      setIsFading(false);
    }, 300); // 动画持续时间
  };

  return (
    <Routes onUpdate={handleRouteChange}>
      <Route path="/" element={
        <div className={`${isFading ? 'fadeOut' : ''}`}>
          <Home />
        </div>
      } />
      <Route path="/about" element={
        <div className={`${isFading ? 'fadeOut' : ''}`}>
          <About />
        </div>
      } />
    </Routes>
  );
};

export default App;

在上述代码中，handleRouteChange函数在路由更新时触发，设置isFading为true，此时应用fadeOut类名实现旧组件淡出。通过setTimeout在动画结束后将isFading设置回false，新组件在没有fadeOut类名时会正常显示（淡入效果通过@keyframes fadeIn在CSS中自动应用，因为新组件初始状态opacity为0，随着isFading变回false，opacity变为1实现淡入）。