aty-react-router-animated v1.0.1

aty-react-router-animated

react 路由切换动画，支持嵌套路由 (nested routers)和动态路由（dynamic routers）。

安装

npm i aty-react-router-animated --save

你可以直接通过npm/yarn安装，依赖包里带一个左右滑入滑出效果的animate.css，如果要使用该效果，需要在项目中一并引入。

import AnimatedRouter from 'aty-react-router-animated'; //导入我们的的AnimatedRouter组件
import 'aty-react-router-animated/animate.css'; //导入默认的切换动画样式，如果需要其它切换样式，可以导入自己的动画样式定义文件

如果想要自定义切换效果，可以将animate.css复制进自己的项目，并修改其中的动画样式定义（基于 css3 transition），并引入到项目中。

小技巧

如果路由在多个页面文件中都有定义，为了避免每次都需要同时导入 aty-react-router-animated 和 animate.css（如果只有一处引入 animate.css，其它地方不引入的话，在有 code split 的项目中，可能会有样式丢失），有两种办法可以优化：

• 一，将animate.css在入口文件中引入，其它地方可以只引用 aty-react-router-animated
• 二，将 aty-react-router-animated 和 animate.css 包装到一个模块文件中再默认导出，在其他地方引用该新模块：

// 自己项目中的AnimatedRouter模块
import 'aty-react-router-animated/animate.css'; //导入样式文件

export { default } from 'aty-react-router-animated'; //直接将react-animated-route作为默认导出

然后就可以直接引用该文件来使用 AnimatedRouter 了，不必每次都引入animate.css。

如何使用

AnimatedRouter是一个标准的 React 组件，类似react-router中的Switch，将它放入你的项目中，然后在需要支持动画的地方，使用AnimatedRouter替换你的Switch组件即可。

例如，可以对父级路由使用 AnimatedRouter 时定义使用父级路由 path 当作 key: transitionKey={this.props.location.pathname.split('/').slice(0, 2).join('/')}

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Route, Redirect, Switch, BrowserRouter } from 'react-router-dom';
import AnimatedRouter from 'aty-react-router-animated'; //导入我们的的AnimatedRouter组件
import 'aty-react-router-animated/animate.css'; //导入默认的切换动画样式，如果需要其它切换样式，可以导入自己的动画样式定义文件

import Login from 'modules/Login';
import Signup from 'modules/Signup';

class App extends Component {
    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>
        );
    }
}

render(
    <BrowserRouter>
        <App />
    </BrowserRouter>,
    document.querySelector('#root')
);

自定义动画

如果不希望使用左右滑入动画，则可以自定义自己的路由动画。可以将默认的 animate.scss(css) 复制进自己的项目，然后修改不同阶段的样式值即可。

页面分为前进(forward)和后退(backward)，两者分别会应用不同的 classNames 到react-transition-group的CSSTransition组件。关于 classNames 的更多用法，请参考官方文档。

默认的 classNames 如下，如果你设置了 prefix，则名称会变为 {prefix}-forward / {prefix}-backward。

同时，如果没有设置componnt={null}的话，AnimateRouter 将会渲染一个路由页面容器节点，该节点会有一些 className，可以用来辅助做动画定义。

FAQ

• Q: 动画执行异常？ A: 可以尝试设置 timeout 属性，并保持与动画样式中定义的过渡时间一致（默认的 animate.scss 中为 300）

更多说明以及我在探索路由动画应用中所遇到的坑，可以阅读我的博客文章。