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;
}

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

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值