使用react-router实现单页面应用时设置页面间过渡的两种方式

1. 官方方法（推荐）

https://github.com/reactjs/react-router/tree/master/examples/animations

//--jsimport React from 'react';import ReactCSSTransitionGroup from 'react-addons-css-transition-group';class App extends React.Component {
  render() {    return (      <div className="app">
        <ReactCSSTransitionGroup
          component="div"
          className="transition-wrapper"
          transitionName="example"
          transitionEnterTimeout={500}
          transitionLeaveTimeout={500}>
          //注意这一部分很关键，不能直接使用{this.props.children}
          {React.cloneElement(this.props.children, {
            key: this.props.location.pathname
          })}        </ReactCSSTransitionGroup>
      </div>
    );
  }
}module.exports = App;//--css.example-enter {  opacity: 0.01;
  transition: opacity .5s ease-in;
}

.example-enter.example-enter-active {  opacity: 1;
}

.example-leave {  opacity: 1;
  transition: opacity .5s ease-in;
}

.example-leave.example-leave-active {  opacity: 0;
}

.transition-wrapper {  height: 100%;
}

2. react-router-transition

https://github.com/maisano/react-router-transition

1. 安装

npm install --save react-router-transition

2. 使用

//--js
import React from 'react';
import RouteTransition from 'react-router-transition';

class App extends React.Component {
  render() {
    return (      <div className="app">
        <RouteTransition
          pathname={this.props.location.pathname}
          atEnter={{ opacity: 0 }}          atLeave={{ opacity: 0 }}          atActive={{ opacity: 1 }}          className="transition-wrapper">
          {this.props.children}        </RouteTransition>
      </div>
    );
  }
}

module.exports = App;

//--css
html,
body,
#root,
.app,
.transition-wrapper,
.transition-wrapper>div {
  height: 100%;
}

//--生成的html结构<div class='transition-wrapper'>
  <div style='opacity: 1'>
    <div class='app'>
      ...    </div>
  </div></div>

3. 模块打包问题

目前npm上的react-router-transition模块有问题，package.json配置的入口文件为lib/react-router-transition.js，该文件为webpack编译打包后的文件，不能再次打包，所以实际使用时需要导入src/RouteTransition.js文件，结合webpack.config.js配置如下：

var node_modules_dir = path.join(__dirname, 'node_modules');

resolve: {
  extensions: ['', '.js', 'jsx'],  alias: {    'react-router-transition': path.resolve(node_modules_dir,'react-router-transition/src/RouteTransition.jsx')
  }
}

参考

Animated transitions
maisano/react-router-transition
misterfresh/react-easy-transition
reactjs/react-router
react + react-router transition
What is the correct way to animate/transition between routes in react router

作者：gongzhen
链接：https://www.jianshu.com/p/4dda6e4a22d2