antd mobile（五）react-router界面切换动画

用antd mobile时就在纳闷怎么没有提供界面切换动画，还为之苦恼了半天，后来才发现界面切换的动画是由react router提供了，赶紧的试试吧。

第一步: 是安装ReactCSSTransitionGroup。
React为动画提供了一个附加组件ReactTransitionGroup，这个附加组件是动画的底层API，并且还提供了一个附件组件ReactCSSTransitionGroup，
ReactCSSTransitionGroup能够简单的实现基于css的动画和转换

cnpm install –save react-addons-css-transition-group

第二步：是修改app.js文件的人口。
修改前的代码是：

render() {
        return (
            <div id="reactContainer">
                {
                    this.props.children
                }
            </div>
        );
    }

修改后。

import  React,{Component} from 'react';
import { connect,dispatch } from 'react-redux' // 引入connect

import ReactCSSTransitionGroup from "react-addons-css-transition-group";
import style from "./Container.css";

class App extends Component {
  constructor(props, context) {
    super(props, context);
  }

  componentWillMount() {
    document.body.style.margin = "0px";
    // 这是防止页面被拖拽
    document.body.addEventListener('touchmove', (ev) => {
      ev.preventDefault();
    });
  }

  render() {
    return (
      <ReactCSSTransitionGroup
        transitionName="transitionWrapper"
        component="div"
        className={style.transitionWrapper}
        transitionEnterTimeout={300}
        transitionLeaveTimeout={300}>
        <div key={this.props.location.pathname}
             style={{position:"absolute", width: "100%"}}>
          {
            this.props.children
          }
        </div>
      </ReactCSSTransitionGroup>
    );
  }
}
// 利用connect将组件与Redux绑定起来
export default connect((AppMd) => ({AppMd}))(App)

第三步：则为界面切换定义css样式：
Container.css的内容如下：

:global(.transitionWrapper-enter) {
  position: absolute;
  top: 0;
  background: #fff;
  z-index: 10000;
  opacity: 1;
  transform: translateX(100%);
}

:global(.transitionWrapper-enter.transitionWrapper-enter-active) {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.4s ease-out;
}

:global(.transitionWrapper-leave) {
  opacity: 1;
  transform: translateX(0);
}

:global(.transitionWrapper-leave.transitionWrapper-leave-active) {
  opacity: 1;
  transform: translateX(-100%);
  transition: all 0.4s ease-out;
}

.transitionWrapper {
  position: relative;
}

这样实现了界面切换功能。