React路由动画

React路由动画

不啰哩啰嗦 直接来，介于自己踩过的坑，对于React路由动画分享给大家，因为NPM包管理库和其他的一些参考文档说的并不是很详细，对于新手来说可能会一脸懵逼！

使用方式：

1、 安装

npm install react-animated-router --save

2、 使用方式

import AnimatedRouter from 'react-animated-router'; 
import 'react-animated-router/animate.css'; // 这里是默认的路由动画css 建议自己复制放入公共的css文件中

3、需要用到动画的路由

import React, {Component} from 'react';
import {Switch, Route} from 'react-router-dom';

import AnimatedRouter from 'react-animated-router';

import Login from '../components/login/login'
import Signup from '../components/signup/signup'

import './main.scss';

class Main extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    componentDidMount() {

    }

    render() {
    /** 假如你的代码如此，则可直接使用最下方代码代替，即直接使用        AnimatedRouter 替换掉Switch
         * return (
         *  <Switch>
         *       <Route path="/login"` component={Login} />
         *       <Route path="/signup" component={Signup} />
         *       <Redirect to="/login" />
         *   </Switch>
         * );
         **/
 
        return (
            <AnimatedRouter>
                <Route path="/login" component={Login} />
                <Route path="/signup" component={Signup} />
                <Redirect to="/login" />
            </AnimatedRouter>
        );
    }
}

export default Main;

4、按照以上方法会报错，还需要安装以下库

npm install react-transition-group@2.3.0 --save
npm install prop-types --save //这里是一个坑 额外需要的库，NPM包管理里边没有提到

建议说明

NPM包管理的路由动画是左右移出，个人特别不建议默认的动画样式，这里简单的对动画css名称说明一下，并加改自己比较中意的一种：

• 默认css

$prefix: animated-router !default;

.#{$prefix} {
    &-container {
        /* 动画容器节点 */
    }

    &-in-transition {
        /* 页面动画中 */
        position: relative;
        width: 100%;
        overflow: hidden;
    }

    /** START: 自定义进出场动画 **/
    &-forward-enter {
        transform: translate(100%);
    }
    &-forward-enter-active {
        transform: translate(0);
    }
    &-forward-exit {
        transform: translate(0);
    }
    &-forward-exit-active {
        transform: translate(-100%);
    }

    &-backward-enter {
        transform: translate(-100%);
    }
    &-backward-enter-active {
        transform: translate(0);
    }
    &-backward-exit {
        transform: translate(0);
    }
    &-backward-exit-active {
        transform: translate(100%);
    }
    /** END **/

    &-forward-enter-active,
    &-forward-exit-active,
    &-backward-enter-active,
    &-backward-exit-active {
        /* 不同过渡阶段需要的过渡时间与缓动效果 */
        transition: transform 0.3s linear;
    }
    &-forward-exit,
    &-backward-exit {
        position: absolute !important;
        width: 100%;
        top: 0;
        left: 0;
    }
}

可能有很对人不理解相应的className是什么意思，下面是我中意的动画，并附带详细解释。

• 个人中意的路由动画

$prefix: animated-router !default;

.#{$prefix} {
    &-container {
        /* 动画容器节点 这里需要自己写一下样式 建议一下*/
        width: 100%;
        height: 100%;
    }

    &-in-transition {
        /* 页面动画中 */
        position: relative;
        width: 100%;
        overflow: hidden;
    }

    /** START: 自定义进出场动画 **/
    &-forward-enter { /*进入的页面（进入前）*/
        transform: translateX(50px);
        opacity: 0;
    }

    &-forward-enter-active { /*进入的页面（进入后）*/
        transform: translateX(0);
        opacity: 1;
    }

    &-forward-exit { /*离开的页面 （离开前）*/
        transform: translateX(0);
        opacity: 0.3;
    }

    &-forward-exit-active { /*离开的页面 （离开后）*/
        transform: translateX(-30px);
        opacity: 0;
    }

    /*离场动画 （返回）*/

    &-backward-enter { /*进入的页面（进入前）*/
        transform: translate(-50px);
        opacity: 0;
    }

    &-backward-enter-active { /*进入的页面（进入后）*/
        transform: translate(0);
        opacity: 1;
    }

    &-backward-exit { /*离开的页面（离开前）*/
        transform: translate(0);
        opacity: 0.3;
    }

    &-backward-exit-active { /*离开的页面（离开后）*/
        transform: translate(30px);
        opacity: 0;
    }

    /** END **/

    &-forward-enter-active,
    &-forward-exit-active,
    &-backward-enter-active,
    &-backward-exit-active {
        /* 不同过渡阶段需要的过渡时间与缓动效果 */
        transition: all 0.3s ease;
    }

    &-forward-exit,
    &-backward-exit {
        position: absolute !important;
        width: 100%;
        height: 100%;
        overflow: hidden;
        top: 0;
        left: 0;
    }
}

注意：动画container容器需要设置width:100%;height:100%;默认是没有设置的。

参考文档：
https://www.npmjs.com/package/@huangdawei/react-animated-router
https://segmentfault.com/a/1190000016004185