route上使用react-transition-group

react-transition-group简介：

react-transition-group 一个官网提供的动画过度库，css动画的方式，比较局限，涉及到一些js动画的时候没法处理了，借住这个react-transition-group模块可以更方便的实现更加复杂的动画效果，而官方提供的三个组建（Transition,CSSTransition,TransitonGroup）。

http://reactcommunity.org/react-transition-group/ 官网

安装 react-transition-group

# npm
npm install react-transition-group --save
#如果用了 TypeScript 需要安装 @type
npm install @types/react-transition-group

或

# yarn
yarn add react-transition-group

CDN/外部

由于Reaction转换组相当小，在应用程序中包含库的开销可以忽略不计。但是，在捆绑时从外部CDN获益的情况下，请链接到以下CDN：
Https://unpkg.com/react-transition-group/dist/react-transition-group.js

<script src="Https://unpkg.com/react-transition-group/dist/react-transition-group.js"></script>

官方提供组件

组件	说明
Transition	过渡组件
CSSTransition	动画进入出入组件
SwitchTransition	动画却换组件
TransitionGroup	列表动画组件

react-transition-group 的使用

index.js 文件

import React from 'react';

import {
  Route,
  Switch,
  withRouter,
  BrowserRouter
} from 'react-router-dom';

import './index.css';
import {CSSTransition, TransitionGroup} from 'react-transition-group';
import {HomePage, AboutPage, ListPage, DetailPage} from '../Pages/index';

const ANIMATION_MAP = {
  PUSH: 'forward',
  POP: 'back'
}

const Routes = withRouter(({location, history}) => (
  <TransitionGroup
    className={'router-wrapper'}
    childFactory={child => React.cloneElement(
      child,
      {classNames: ANIMATION_MAP[history.action]}
    )}
  >
    <CSSTransition
      timeout={500}
      key={location.pathname}
    >
      <Switch location={location}>
        <Route exact path={'/'} component={HomePage} />
        <Route exact path={'/about'} component={AboutPage} />
        <Route exact path={'/list'} component={ListPage} />
        <Route exact path={'/detail'} component={DetailPage} />
      </Switch>
    </CSSTransition>
  </TransitionGroup>
));

export default class App4 extends React.PureComponent {
  render() {
    return (
      <BrowserRouter>
        <Routes/>
      </BrowserRouter>
    );
  }
}

timeout 属性可以指定对应值的动画时间

timeout={{
 enter: 300,
 exit: 500,
}}

index.css 文件

.router-wrapper {
  overflow: hidden;
}

.forward-enter {
  opacity: 0;
  transform: translateX(100%);
}

.forward-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: all 500ms;
}

.forward-exit {
  opacity: 1;
  transform: translateX(0);
}

.forward-exit-active {
  opacity: 0;
  transform: translateX(-100%);
  transition: all 500ms;
}

.back-enter {
  opacity: 0;
  transform: translateX(-100%);
}

.back-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: all 500ms;
}

.back-exit {
  opacity: 1;
  transform: translateX(0);
}

.back-exit-active {
  opacity: 0;
  transform: translate(100%);
  transition: all 500ms;
}

如果出现缓存问题 解决方案如下：
react-activation 参考网址

yarn add react-activation
# or 
npm install react-activation

// 用 AliveScope和KeepAlive 包裹 TransitionGroup 缓存就可以解决

import KeepAlive, { AliveScope } from "react-activation";
import { TransitionGroup, CSSTransition } from "react-transition-group";

<AliveScope>
	<TransitionGroup>
		<CSSTransition>
			<div>
				{/* 路由缓存功能 AliveScope KeepAlive */}
            	<Route
              		exact
              		path={Routers.HOME}
             		render={(props) => (
                		<KeepAlive>
                  			<Home {...props} />
                		</KeepAlive>
              		)}
            	/>
			</div>
		</CSSTransition>
	</TransitionGroup>
</AliveScope>

API

CSSTransition 组件属性

组件属性	说明
in	动画状态
timeout	动画执行时间
classNames	css动画名称
mountOnEnter	默认情况下，子组件与父转换组件一起立即挂载。如果你想“延迟挂载”第一个in={true}上的组件，你可以设置mountOnEnter。在第一次进入转换之后，组件将保持挂载状态，即使在“退出”状态下也是如此，除非你还指定unmountOnExit
unmountOnExit	默认情况下，子组件在达到“退出”状态后仍然挂载。如果你希望在组件退出后卸载组件，请设置unmountOnExit
appear	如果组件挂载时显示组件，则该组件不进行转换。如果您希望在第一个挂载集上进行转换，则显示为true，并且组件将在< transition >挂载后立即进行转换，注意:没有特定的“显示”状态。appear只添加一个额外的enter转换
enter	启用或禁用enter转换
exit	启用或禁用exit转换
addEndListener	添加自定义转换结束触发器。使用正在转换的DOM节点和done回调调用。允许更细粒度的转换结束逻辑。注意:如果提供超时，仍将其用作回退
onEnter	在应用‘Enter’或‘出现’类后立即触发回调
onEntering	在应用‘Enter-Active’或‘出现-活动’类后立即触发回调
onEntered	在“Enter”或“出现”类之后立即触发回调移除而done类添加到DOM节点
onExit	在应用“Exit”类后立即触发回调
onExiting	在应用“Exit-Active”之后立即触发回调
onExited	在“退出”类之后立即触发回调。移除而exit-done类添加到DOM节点

css动画属性

动画属性	说明
.xxx-enter	入场前加载动画
.xxx-enter-active	入场后到入场结束的过程
.xxx-enter-done	入场动画执行完毕后
.xxx-exit	出场前加载动画
.xxx-exit-active	出场后到入场结束的过程
.xxx-exit-done	出场动画执行完毕后