详解如何给React-Router添加路由页面切换时的过渡动画

2019-11-19 11:42:07

字体：大中小

来源：转载

供稿：网友

PS: 本篇文章使用的React-Router版本为react-router-dom: ^5.0.0 (兼容4.x)

使用过Vue2的同学们应该都知道<transition>这个内置组件，它可以帮我们添加过渡动画，之前一直用它来给Vue-Router路由的跳转添加转场动画，使用起来非常便捷。那在React中应该如何给路由切换添加过渡动画呢？

react-transition-group

我们需要借助React的官方动画库react-transition-group，文档戳这里

react-transition-group提供了三个React组件，分别是<Transition>，<CSSTransition>以及<TranstionGroup>，关于它们的详细api还请各位去查阅官方文档，这里只是简单介绍一下它们各自的用途：

<Transition>：通过javascript动态修改style的方式为子元素添加动画，对比<CSSTransiton>多了几个编程式的props可以配置
<CSSTransition>：相比<Transition>多了一个classNames可以配置，通过引入CSS以及动态更改子元素className的方式为子元素添加动画（是不是像极了Vue里的<transition>）
<TranstionGroup>：顾名思义，为多个子元素添加动画，需要结合<Transition>或<CSSTransition>使用

关于react-transititon-group与react-router的结合使用方式，官方文档里也给出了示例，但是直接拿来实现路由转场动画，我觉得方式并不够优雅。我还是更倾向于封装一个<AnimatedSwitch>组件来替换react-router自带的<Switch>组件来实现路由跳转时的转场动画。

编写过渡组件

实际代码也非常的简单

比如我们的路由长下面这个样子:

<!-- App.js --><Switch>  <Route exact path="/login" component={Login} />  <Route exact path="/register" component={Register} />  <Route exact path="/" component={Home} /></Switch>

我们需要写一个<AnimatedSwitch>来实现<Switch>的功能还要给路由跳转添加动画，其实也就是在<Swtich>外部用<CSSTransition>和<TranstionGroup>再封装一层。

代码如下：

// AnimatedSwitch.less// 很多动画都需要给路由对应组件最外层元素设置position: absolute;.route {  position: absolute;  left: 0;  top: 0;  width: 100%;  height: 100%;}// 帧动画.fade-enter {  opacity: 0;}.fade-enter.fade-enter-active {  opacity: 1;  transition: opacity 300ms ease-in;}.fade-exit {  opacity: 1;}.fade-exit.fade-exit-active {  opacity: 0;  transition: opacity 300ms ease-in;}

// AnimatedSwitch.jsimport React from 'react'import { TransitionGroup, CSSTransition } from 'react-transition-group'import { Route, Switch } from 'react-router-dom'import './AnimatedSwitch.less'const AnimatedSwitch = props => {  const { children } = props  return (    <Route      render={({ location }) => (        <TransitionGroup>          <CSSTransition            key={location.key}            classNames={props.type || 'fade'}             timeout={props.duration || 300}          >            <Switch location={location}>{children}</Switch>          </CSSTransition>        </TransitionGroup>      )}    />  )}export default AnimatedSwitch

其中值得注意的是用到了<Route>的render函数，我们需要用它将route props中的location传递给<Switch>，使其具有动态更换子路由的能力。

我们原有的JSX可以更换成如下结构：

<!-- App.js --><AnimatedSwitch>  <Route exact path="/login" component={Login} />  <Route exact path="/register" component={Register} />  <Route exact path="/" component={Home} /></AnimatedSwitch>

至此，一个简单的<AnimatedSwitch>组件的编写就完成了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：vue中img src 动态加载本地json的图片路径写法

下一篇：vue项目中使用fetch的实现方法