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

素颜马尾好姑娘i 2022-06-10 09:59 200阅读 0赞

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

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