详解如何给React-Router添加路由页面切换时的过渡动画

<!-- App.js -->

<Switch>
  <Route exact path="/login" component={Login} />
  <Route exact path="/register" component={Register} />
  <Route exact path="/" component={Home} />
</Switch>

// AnimatedSwitch.less

// 很多动画都需要给路由对应组件最外层元素设置position: absolute;
.route {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

// 帧动画
.fade-enter {
  opacity: 0;
}

.fade-enter.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms ease-in;
}

.fade-exit {
  opacity: 1;
}

.fade-exit.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms ease-in;
}

// AnimatedSwitch.js

import React from 'react'
import { TransitionGroup, CSSTransition } from 'react-transition-group'
import { Route, Switch } from 'react-router-dom'
import './AnimatedSwitch.less'

const AnimatedSwitch = props => {
  const { children } = props
  return (
    <Route
      render={({ location }) => (
        <TransitionGroup>
          <CSSTransition
            key={location.key}
            classNames={props.type || 'fade'} 
            timeout={props.duration || 300}
          >
            <Switch location={location}>{children}</Switch>
          </CSSTransition>
        </TransitionGroup>
      )}
    />
  )
}

export default AnimatedSwitch

<!-- App.js -->

<AnimatedSwitch>
  <Route exact path="/login" component={Login} />
  <Route exact path="/register" component={Register} />
  <Route exact path="/" component={Home} />
</AnimatedSwitch>