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

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

使用過(guò)Vue2的同學(xué)們應(yīng)該都知道這個(gè)內(nèi)置組件，它可以幫我們添加過(guò)渡動(dòng)畫(huà)，之前一直用它來(lái)給Vue-Router路由的跳轉(zhuǎn)添加轉(zhuǎn)場(chǎng)動(dòng)畫(huà)，使用起來(lái)非常便捷。那在React中應(yīng)該如何給路由切換添加過(guò)渡動(dòng)畫(huà)呢？

react-transition-group

我們需要借助React的官方動(dòng)畫(huà)庫(kù)react-transition-group，文檔戳這里

react-transition-group提供了三個(gè)React組件，分別是，以及，關(guān)于它們的詳細(xì)api還請(qǐng)各位去查閱官方文檔，這里只是簡(jiǎn)單介紹一下它們各自的用途：

• ：通過(guò)javascript動(dòng)態(tài)修改style的方式為子元素添加動(dòng)畫(huà)，對(duì)比多了幾個(gè)編程式的props可以配置

• ：相比多了一個(gè)classNames可以配置，通過(guò)引入CSS以及動(dòng)態(tài)更改子元素className的方式為子元素添加動(dòng)畫(huà)（是不是像極了Vue里的）

• ：顧名思義，為多個(gè)子元素添加動(dòng)畫(huà)，需要結(jié)合或使用

關(guān)于react-transititon-group與react-router的結(jié)合使用方式，官方文檔里也給出了示例，但是直接拿來(lái)實(shí)現(xiàn)路由轉(zhuǎn)場(chǎng)動(dòng)畫(huà)，我覺(jué)得方式并不夠優(yōu)雅。我還是更傾向于封裝一個(gè)組件來(lái)替換react-router自帶的組件來(lái)實(shí)現(xiàn)路由跳轉(zhuǎn)時(shí)的轉(zhuǎn)場(chǎng)動(dòng)畫(huà)。

編寫(xiě)過(guò)渡組件

實(shí)際代碼也非常的簡(jiǎn)單

比如我們的路由長(zhǎng)下面這個(gè)樣子:

我們需要寫(xiě)一個(gè)來(lái)實(shí)現(xiàn)的功能還要給路由跳轉(zhuǎn)添加動(dòng)畫(huà)，其實(shí)也就是在外部用和再封裝一層。

代碼如下：

// AnimatedSwitch.less

// 很多動(dòng)畫(huà)都需要給路由對(duì)應(yīng)組件最外層元素設(shè)置position: absolute;
.route {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

// 幀動(dòng)畫(huà)
.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 (
     (
        
          
            {children}
          
        
      )}
    />
  )
}

export default AnimatedSwitch

其中值得注意的是用到了的render函數(shù)，我們需要用它將route props中的location傳遞給，使其具有動(dòng)態(tài)更換子路由的能力。

我們?cè)械腏SX可以更換成如下結(jié)構(gòu)：

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

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

分享名稱：怎么給React-Router添加路由頁(yè)面切換時(shí)的過(guò)渡動(dòng)畫(huà)-創(chuàng)新互聯(lián)
本文URL：http://weahome.cn/article/djcgie.html