詳解如何給React-Router添加路由頁面切換時的過渡動畫

更新時間：2019年04月25日 14:44:10 作者：LoneYin

這篇文章主要介紹了詳解如何給React-Router添加路由頁面切換時的過渡動畫，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

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動態(tài)修改style的方式為子元素添加動畫，對比<CSSTransiton>多了幾個編程式的props可以配置
<CSSTransition>：相比<Transition>多了一個classNames可以配置，通過引入CSS以及動態(tài)更改子元素className的方式為子元素添加動畫（是不是像極了Vue里的<transition>）
<TranstionGroup>：顧名思義，為多個子元素添加動畫，需要結合<Transition>或<CSSTransition>使用

關于react-transititon-group與react-router的結合使用方式，官方文檔里也給出了示例，但是直接拿來實現(xiàn)路由轉場動畫，我覺得方式并不夠優(yōu)雅。我還是更傾向于封裝一個<AnimatedSwitch>組件來替換react-router自帶的<Switch>組件來實現(xiàn)路由跳轉時的轉場動畫。

編寫過渡組件

實際代碼也非常的簡單

比如我們的路由長下面這個樣子:

<!-- App.js -->

<Switch>
  <Route exact path="/login" component={Login} />
  <Route exact path="/register" component={Register} />
  <Route exact path="/" component={Home} />
</Switch>

我們需要寫一個<AnimatedSwitch>來實現(xiàn)<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函數(shù)，我們需要用它將route props中的location傳遞給<Switch>，使其具有動態(tài)更換子路由的能力。

我們原有的JSX可以更換成如下結構：

<!-- App.js -->

<AnimatedSwitch>
  <Route exact path="/login" component={Login} />
  <Route exact path="/register" component={Register} />
  <Route exact path="/" component={Home} />
</AnimatedSwitch>

至此，一個簡單的<AnimatedSwitch>組件的編寫就完成了。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: