欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2023-11-09 12:33:04
ps: 本篇文章使用的react-router版本为react-router-dom: ^5.0.0 (兼容4.x) 使用过vue2的同学们应该都知道

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.js

import 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>组件的编写就完成了。

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

上一篇： 微信小程序Flex布局用法深入浅出分析

下一篇： 详解JS实现简单的时分秒倒计时代码

推荐阅读