小編給大家分享一下怎么給React-Router添加路由頁面切換時的過渡動畫，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)是一家成都網(wǎng)站建設、網(wǎng)站建設，提供網(wǎng)頁設計，網(wǎng)站設計，網(wǎng)站制作，建網(wǎng)站，按需制作網(wǎng)站，網(wǎng)站開發(fā)公司，從2013年創(chuàng)立是互聯(lián)行業(yè)建設者，服務者。以提升客戶品牌價值為核心業(yè)務，全程參與項目的網(wǎng)站策劃設計制作，前端開發(fā)，后臺程序制作以及后期項目運營并提出專業(yè)建議和思路。

使用過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>

以上是“怎么給React-Router添加路由頁面切換時的過渡動畫”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)成都網(wǎng)站設計公司行業(yè)資訊頻道！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

分享名稱：怎么給React-Router添加路由頁面切換時的過渡動畫-創(chuàng)新互聯(lián)
網(wǎng)頁鏈接：http://jinyejixie.com/article4/djcgie.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、云服務器、全網(wǎng)營銷推廣、虛擬主機、網(wǎng)站改版、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)