React中路由切换动画

在React中，可以使用react-router-dom库结合CSSTransition组件来实现路由切换动画。以下是一个简单的例子：

首先，安装react-router-dom和react-transition-group：

npm install react-router-dom react-transition-group

然后，在你的React应用中使用它们：

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import { CSSTransition } from 'react-transition-group';
 
const duration = 500; // 动画持续时间，单位毫秒
 
const FadeRoute = ({ location }) => (
  <CSSTransition
    key={location.key}
    timeout={duration}
    classNames="fade"
  >
    <Switch location={location} />
  </CSSTransition>
);
 
const App = () => (
  <Router>
    <div className="app">
      <FadeRoute />
    </div>
  </Router>
);
 
export default App;

在CSS文件中定义动画样式：

.fade-enter {
  opacity: 0;
}
 
.fade-enter-active {
  opacity: 1;
  transition: opacity ${duration}ms ease-in;
}
 
.fade-exit {
  opacity: 1;
}
 
.fade-exit-active {
  opacity: 0;
  transition: opacity ${duration}ms ease-in;
}

在这个例子中，我们定义了一个FadeRoute组件，它使用CSSTransition包裹Switch组件，以便在路由切换时应用淡入淡出动画。动画的样式由CSS定义，通过classNames="fade"指定。这里的duration变量定义了动画的持续时间。