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

栏目: 服务器 · 发布时间: 5年前

内容简介:PS: 本篇文章使用的使用过Vue2的同学们应该都知道我们需要借助React的官方动画库

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


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

深入理解C#(第3版)

深入理解C#(第3版)

斯基特 (Jon Skeet) / 姚琪琳 / 人民邮电出版社 / 2014-4-1 / 99.00元

本书是世界顶级技术专家“十年磨一剑”的经典之作,在C#和.NET领域享有盛誉。与其他泛泛介绍C#的书籍不同,本书深度探究C#的特性,并结合技术发展,引领读者深入C#的时空。作者从语言设计的动机出发,介绍支持这些特性的核心概念。作者将新的语言特性放在C#语言发展的背景之上,用极富实际意义的示例,向读者展示编写代码和设计解决方案的最佳方式。同时作者将多年的C#开发经验与读者分享,读者可咀其精华、免走弯......一起来看看 《深入理解C#(第3版)》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具