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

創(chuàng)新互聯(lián)成立于2013年，是專業(yè)互聯(lián)網(wǎng)技術服務公司，擁有項目成都網(wǎng)站建設、網(wǎng)站建設網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元永州做網(wǎng)站,已為上家服務,為永州各地企業(yè)和個人服務,聯(lián)系電話:13518219792

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

react-transition-group

我們需要借助React的官方動畫庫react-transition-group，文檔戳這里

react-transition-group提供了三個React組件，分別是，以及，關于它們的詳細api還請各位去查閱官方文檔，這里只是簡單介紹一下它們各自的用途：

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

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

• ：顧名思義，為多個子元素添加動畫，需要結合或使用

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

編寫過渡組件

實際代碼也非常的簡單

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

我們需要寫一個來實現(xiàn)的功能還要給路由跳轉添加動畫，其實也就是在外部用和再封裝一層。

代碼如下：

// 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 (
     (
        
          
            {children}
          
        
      )}
    />
  )
}

export default AnimatedSwitch

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

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

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