React-实现仿原生App的转场动画

作者: CoderXLL | 来源:发表于2019-05-24 21:02 被阅读64次

React大法好

一、前言

最近这两个星期，已经从jQuery的泥潭里抽出身来，开始学习React框架。React其实是一个UI框架，其功能性比较单一，需要依赖各种插件进行开发。这些React插件集合起来，就是鼎鼎大名的React全家桶。

目前我了解并使用过的有如下几个插件:

react-router-dom React路由跳转插件

react-loadable 一个动态导入加载UI的高阶组件

redux, react-redux-dom react函数响应式编程框架，类似于iOS中的ReactiveCocoa数据驱动视图的思想。刚开始学的时候，配上ES6、7、8的语法糖，能绕的你不要不要的

prop-types 为弱语法的JS提供强类型操作

axios React界可以与ajax相抗衡的网络库

react-motion React中的弹性动画库

react-transition-group React中个人目前感觉最好用的动画库
待了解的插件及知识点:

react-saga、react-thunk、immutable、webpack打包

二、需求产出

本篇文章是我在React学习过程中，打算将用过的知识点串起来时遇到的一个需求问题。因为还是iOS出身，所以梳理知识点的时候，还是想按照移动端那种形式去整理，如下图所示。很屌丝，终归还是一时难忘iOS。

React学习Demo调试图
此Demo现在还在编写完善当中，暂不公开。
Demo中的路由跳转肯定就是用的react-router-dom这个插件了。但是这个插件进行路由切换时，效果很僵硬，没有过渡效果。这对于追求用户体验的iOS开发者来说肯定是不能接受的！！！所以我要做的，就是对react路由切换加上仿原生的转场动画。

三、react-router-dom

简单实现一下纯router插件的路由跳转，效果及代码如下：
要说的都在代码注释中！！！先不要去管CSS样式

import React from 'react';
import {
    //以html5提供的history api形式实现的路由
    //一般其作为项目的原始组件进行包裹
    BrowserRouter as Router,
    //路由组件，path指定匹配的路由，component指定路由匹配时展示的组件
    Route,
    //Route组件包裹器
    Switch,
    //一个高阶组件,为组件提供location，history等对象
    withRouter
} from 'react-router-dom';
//自定义HomePage组件
import HomePage from '../page/home';
//自定义SecondPage组件
import SecondPage from '../page/second';

const RouteModule = function (props) {
    return (
        <Switch history={props.history}>
            <Route exact path={'/'} component={HomePage} name={'首页'} />
            <Route path={'/second'} component={SecondPage} name={'第二页'} />
        </Switch>
    );
};

export default class DemoApp5 extends React.Component {
    render() {
        const Routes = withRouter(RouteModule);
        return (
            <Router>
                <Routes />
            </Router>
        );
    }
}

默认的路由切换效果如下:

僵硬的react-router-dom路由切换效果.gif

四、react-transition-group

上面也略有介绍，react-transition-group是react中的一个很不错的动画库。为什么我会想到用它去实现转场动画？因为我了解的react动画库就两个，还有一个react-motion是弹性动画库，显然不合适。
众所周知，JS实现动画最方便的还要属jQuery。其提供了一系列动画函数，好用且方便。但是操控的都是真实dom，这显然与React的虚拟dom思想相违背，所以没有考虑jQuery去实现需求。

1、 CSSTransition实现单一组件动画

CSSTransition单独使用时，有两个比较重要的属性。in和classNames。

classNames属性： CSSTransition子组件动态类选择器名前缀。
in属性：
当in为true时，CSSTransition的子组件会先添加${classNames}-enter类，下一个tick会添加${classNames}-enter-active类。
当in为false时，CSSTransition的子组件会先添加${classNames}-exit类，下一个tick会添加${classNames}-exit-active类。

基于上面的知识点，我们先出一个react-transition-group的简单小Demo。

import React from 'react';
import {CSSTransition} from 'react-transition-group';
import './style.css';
/*
 * 知识点
 * CSSTransition属性in为true时，其子组件会加上`${classNames}-enter`的类
 * 然后再下一个tick时，马上加上`${classNames}-enter-active`的类
 * 当in为false时，其组件会加上`${classNames}-exit`和`${classNames}-exit-active`类
 *
 * unmountOnExit为false的时候，其子组件exit后不会卸载，并添加`${classNames}-exit-done`类
 * 为true，子组件exit后会卸载
 * 这里我们直接卸载，省的其写done样式
 * */
export default class DemoApp1 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
           show: true
        };
        this.handleSwitch = this.handleSwitch.bind(this);
    }
    handleSwitch() {
        this.setState({
            show: !this.state.show
        });
    }
    render() {
        return (
            <div className='app1-container'>
                <CSSTransition
                    in={this.state.show}
                    classNames='app1'
                    timeout={500}
                    unmountOnExit={true}
                >
                    <div className='app1-square' />
                </CSSTransition>
                <button
                    onClick={this.handleSwitch}
                    className='app1-btn'
                >切换
                </button>
            </div>
        );
    }
}

CSS样式如下：

.app1-enter {
    /*初始透明度为0*/
    opacity: 0;
    /*初始偏移量为100%*/
    transform: translateX(100%);
}

.app1-enter-active {
    /*随后透明度为1*/
    opacity: 1;
    /*随后偏移量回归原位*/
    transform: translateX(0);
    /*这个移动过程我们做个动画，动画持续时长500毫秒*/
    transition: all 500ms ease;
}

.app1-exit {
    opacity: 1;
    transform: translateX(0);
}

.app1-exit-active {
    opacity: 0;
    transform: translateX(-100%);
    transition: all 500ms ease;
}

效果符合预期：

单一组件动画效果

2、TransitionGroup实现多组件协调动画

我们的路由跳转，实际上是有两个组件同时动画的。即第一个页面组件和第二个页面组件。所以单纯的CSSTransition组件不能满足需求。
以代码为例进行讲解：

export default class DemoApp2 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            number: 0
        };
        this.handleSwitch = this.handleSwitch.bind(this);
    }
    handleSwitch(event) {
        this.setState({
            number: this.state.number === 0?1:0
        });
    }
    render() {
        return (
            <div className='app2-container'>
                <TransitionGroup>
                    <CSSTransition
                        key={this.state.number}
                        timeout={500}
                        classNames='app2'
                        unmountOnExit={true}
                    >
                        <div className='app2-square'>{this.state.number}</div>
                    </CSSTransition>
                </TransitionGroup>
                <button className='app2-btn' onClick={this.handleSwitch}>切换</button>
            </div>
        );
    }
}

CSS代码同上
我们和纯CSSTransition用法进行比较，发现有以下几点不同：

CSSTransition组件上层嵌了一层TransitionGroup组件
没有使用in属性作为控制组件添加enter和exit类的手段，而是使用了key属性。
我们先来看一下效果：
TransitionGroup组件使用效果
将动画速度调低，来看一下子节点类选择器的变化：
子节点类选择器变化过程
现象：我们可以看到在点击切换节点内容的时候，会新增了一个新的dom。此时新老dom并存。老dom新增了-exit和-exit-active两个选择器。新dom新增了-enter和-enter-active两个选择器。这样的情况确实会出现我们看到的效果。
原因：刚开始学习react的时候，我们就听过了react的虚拟dom渲染优化机制。它是有一个diff算法，比较出存在变化的地方，然后针对性地进行重新渲染。diff机制其实用到的就是key，我们两次key不一样，react就会卸载旧key对应的节点，装载新key对应的节点。但是为什么会有动画效果，而不是立马卸载装载呢？这就是TransitionGroup组件的特别之处，它会保存住即将被卸载的children，并在动画执行完毕将其进行移除。

五、路由转场动画

针对上面对TransitionGroup和CSSTransition组件的运用，想象一下，其实我们把案例中的子组件div换成对应的Route路由组件，讲道理就能实现转场动画了。
但是diff算法需要的key，用什么来表示呢？你应该一下子就能想起来了，每个Route路由的pathname路径都不一样，用它来简直完美。

注意： 新旧两个节点，一定要在同一位置才符合我们enter、exit选择器规定的transform属性，并作出X轴方向上平移动画。
所以我将父节点TransitionGroup的position设为releative，子节点HomePage和SecondPage设为绝对定位，且top和left都为0

代码如下：

const RouteModule = function (props) {
    return (
        <TransitionGroup style={{position: 'releative'}}>
            <CSSTransition
                //key为路由路径,因为使用高阶组件withRouter
                //所以会有location和history属性
                key={props.location.pathname}
                timeout={1000}
                classNames={'app3'}
            >
                //这里注意一点，Switch组件是根据location属性中的url进行匹配子组件的
                //如果这个地方不对应设置location，那么旧的Switch组件
                //就会使用新的location去匹配子组件。这样会造成新旧组件为同一个的bug
                <Switch location={props.location}>
                    <Route exact path={'/'} component={HomePage} name={'首页'} />
                    <Route path={'/second'} component={SecondPage} name={'第二页'} />
                </Switch>
            </CSSTransition>
        </TransitionGroup>
    );
};

export default class DemoApp3 extends React.Component {
    render() {
        const Routes = withRouter(RouteModule);
        return (
            <Router>
                <Routes />
            </Router>
        );
    }
}

来看一下效果：

转场效果图

应该算是符合预期了，但是push与pop时的效果是一样的，因为我们并没有进行区分。

六、实现Push、Pop效果分离

上面我们其实已经做出了Push效果，但是Pop的效果其实是没有处理的，因为选择器都是同一个。
Pop的时候，enter与exit选择器的效果应该和push时的正好相反才对，所以我们先对CSS样式进行处理。

/*push*/
.app4-push-enter {
    opacity: 0;
    transform: translateX(100%);
}

.app4-push-enter-active {
    opacity: 1;
    transform: translateX(0);
    transition: all 500ms ease;
}

.app4-push-exit {
    opacity: 1;
    transform: translateX(0);
}

.app4-push-exit-active {
    opacity: 0;
    transform: translateX(-100%);
    transition: all 500ms ease;
}

/*pop*/
.app4-pop-enter {
    opacity: 0;
    transform: translateX(-100%);
}

.app4-pop-enter-active {
    opacity: 1;
    transform: translateX(0);
    transition: all 500ms ease;
}

.app4-pop-exit {
    opacity: 1;
    transform: translateX(0);
}

.app4-pop-exit-active {
    opacity: 0;
    transform: translateX(100%);
    transition: all 500ms ease;
}

CSS的类选择器完成后，下一步就是在适当的时机，对TransitionGroup子组件添加这些对应的选择器。
一开始我的做法是通过路由中的location.action去判断是否为PUSH还是POP操作，并对应设置CSSTransition组件的选择器前缀classNames属性。

<CSSTransition
                key={props.location.pathname}
                timeout={500}
                classNames={props.history.action === 'PUSH'?'app4-push':'app4-pop'}
            >

但是效果貌似出了些问题~~~

667.gif
确定CSS中的逻辑是没有问题的情况下。将动画速度调低，我们看一下子组件类选择器的变化情况：

子组件类选择器添加过程
我们来分析一下：

当点击Push的时候。按照我们的思路，secondPage组件应该是添加push-enter选择器，home组件应该添加push-exit选择器。

点击Pop的时候，home组件应该添加pop-enter选择器，secondPage组件应该添加pop-exit选择器。
但是现象却是点击push时，home组件添加了pop-exit选择器。
点击pop时，second组件添加了push-exit选择器。
为什么会这样？？？
静下心来继续分析：debugger调试发现，其实组件的location.action值默认是pop。当第一次push操作时，新组件的action变为PUSH，而旧组件action默认为POP，所以自然会添加pop-exit选择器。第二次pop操作时，因为旧组件此时的action为PUSH，所以添加了push.exit。

action:pop     push操作         action:push
旧组件   -------------------->   新组件
新组件  <--------------------    旧组件
               pop操作

那么如何让push操作的时候，新旧子组件分别添加push-enter、enter-exit。pop操作的时候，新旧子组件分别添加pop-enter、pop-exit选择器呢？

经过查找资料，发现TransitionGroup组件有个childFactory属性可以强行覆盖子组件的类选择器名称。

<TransitionGroup
            style={{position: 'releative'}}
            //childFactory属性为一个function
            //这个function的第一个参数child实际上就是TransitionGroup子组件
            //通过React.cloneElement方法重新克隆子组件，并根据当前的操作类型去设置类选择器前缀
            //这样，当操作为push时，子组件的类选择器前缀并不是根据其本身的location.action去分别命名。
            //而是根据最新的action类型设置
            childFactory={child => React.cloneElement(
                  child,
                  {classNames: props.history.action === 'PUSH'?'app4-push':'app4-pop'}
            )}
>

最终效果如下：

react转场实战的最终效果

七、总结

本篇文章是针对React知识点的第一篇文章。围绕这个需求，可以提升对React开发时遇到问题如何适当调试的技能，加深对react-router-dom和react-transition-group两个插件的理解和运用。文中所涉及的代码全部可在这里下载查看，如果对您有所帮助，希望给个Star。
本人是初入前端，水平有限。如若您发现问题，望及时指出，谢谢~🙂

React-实现仿原生App的转场动画

一、前言

二、需求产出

三、react-router-dom

四、react-transition-group

1、 CSSTransition实现单一组件动画

2、TransitionGroup实现多组件协调动画

五、路由转场动画

六、实现Push、Pop效果分离

七、总结

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

移动开发作家群（719776724）分享专题

前端知识