cnpm install react-transition-group --save
在路由配置文件/src/App.js文件下中导入动画组件
引入
import {TransitionGroup, CSSTransition} from 'react-transition-group'在路由组件模板中，用动画组件包裹路由组件
<TransitionGroup>
<CSSTransition timeout={3000} classNames="dg" unmountOnExit key={props.location.pathname}>
<Switch location={props.location}>
<Route path="/" exact component={Login}/>
<Route path="/child1" exact component={Home}/>
<Route path="/child2" exact component={My}/>
</Switch>
</CSSTransition>
</TransitionGroup>使用动画的写法 CSSTransition 需要设置三个属性：
注意：CSSTransition组件的key属性值要保证唯一性，所以用location.pathname
Switch组件要设置location属性为路由信息的props.location，保证路由跳转组件的key和CSSTransition的key一致
如果路由中没有location.pathname，需要使用withRouter导入
import { withRouter } from 'react-router-dom'
export default withRouter(App);在组件中写出路由切换动画的过程
/* 入场动画过程 */
.dg-enter{
transform: translateX(200px)
}
.dg-enter-active{
transition: 2s;
transform: translateX(0px)
}
.dg-enter-done{
transform: translateX(0px)
}
/* 出场动画过程 */
.dg-exit{
transform: translateX(0px)
}
.dg-exit-active{
transition: 2s;
transform: translateX(200px)
}
.dg-exit-done{
transform: translateX(200px)
}引入css文件
import './app.css'
这样一个简单的React路由动画切换就实现了
我们可以自己定义classNames，然后使用css3设置动画，也可以结合animate库设置他的动画效果
下载
npm install animate.css --save
引入
import 'animate.css';
//自定义的类名（定义动画效果，进场前，进场后直到结束，结束前，结束后）
classNames={{
enter: "animate__animated",
enterActive: "animate__fadeIn",
exit: "animate__animated",
exitActive: "animate__fadeOut",
}}具体的我们可以进行参考animate官网网址：Animate.css | A cross-browser library of CSS animations.
