React路由动画切换实现过程详解

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>

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)
  }

import 'animate.css';

//自定义的类名（定义动画效果，进场前，进场后直到结束，结束前，结束后）
classNames={{
    enter: "animate__animated",
    enterActive: "animate__fadeIn",
    exit: "animate__animated",
    exitActive: "animate__fadeOut",
}}