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

1. 官方方法（推荐）

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

//--js
import React from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

class App extends React.Component {
  render() {
    return (
      

        
          //注意这一部分很关键，不能直接使用{this.props.children}
          {React.cloneElement(this.props.children, {
            key: this.props.location.pathname
          })}
        
      
    );
  }
}

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 (
      

        
          {this.props.children}
        
      
    );
  }
}

module.exports = App;

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

//--生成的html结构

  

    

      ...
    
  

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