React App项目页面进出场动画

野生好人
1,971 阅读3分钟

用到的组件react-animated-router

react-animated-router

www.npmjs.com/package/rea…

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

安装

npm install react-animated-router --save

引入

在路由配置文件中引入，src/route/App.js 文件中引入

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

使用

  <Router  basename = "react-app">
        <Switch>
          <AnimatedRouter timeout={300}>
            <Route exact path='/' component={Index} />
            <Route exact path='/page1' component={Page1} />
            <Route exact path='/page2' component={Page2} />
          </AnimatedRouter>
        </Switch>
      </Router>

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

属性类型默认值描述
prefix字符串，可选animated-router应用到 CSSTransition 组件的 classNames 前缀。如果要在同一个项目中使用不同的动画，可以通过设置前缀来定义不同的动画。关于如何自定义动画，请查看下方说明
timeout数字，可选无动画持续时间（毫秒），可以不传，默认为监听 transitionend 时间来判断动画结束。如果有动画异常，可以尝试设置该值，需要注意的是，该值应该与动画样式中定义的过渡时间一致
className字符串，可选无如果传入 className 则会添加到动画节点所在容器节点上
transitionKey字符串，可选无即每个页面节点需要的 key 值，如果不传则会使用当前页面地址的 pathname。
该属性可以用于处理路由页面中还有子路由时的情况，用来避免子路由切换会导致父级页面也一块被重载。
component布尔，可选'div'AnimatedRouter 默认会 render 一个 div 节点，你可以通过该字段修改 render 的节点类型，例如，component="section"将会 render <section>节点。在 react v16+中，可以传入 null 来避免渲染该节点。
appear布尔，可选false文档：appear：是否启用组件首次挂载动画（启用的话将会触发 enter 进场动画）
enter布尔，可选true文档：enter：是否启用进场动画
exit布尔，可选true文档：exit：是否启用离场动画

自定义动画

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

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

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

classNames解释
animated-router-forward页面前进时动画效果
animated-router-backward页面后退时动画效果

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

容器节点 className解释
animated-router-container总是存在
animated-router-in-transition路由动画进行中时存在，可以用来设置动画切换中的一些节点样式设置


avatar
文章
阅读
粉丝