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

来源：互联网发布：布罗代尔知乎编辑：程序博客网时间：2024/05/20 23:07

用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' // 引入connectimport 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;}

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

阅读全文

0 0