PS: 本篇文章使用的React-Router版本為react-router-dom: ^5.0.0 (兼容4.x)

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

react-transition-group

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

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

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

編寫過(guò)渡組件

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

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

<!-- App.js --><Switch>  <Route exact path="/login" component={Login} />  <Route exact path="/register" component={Register} />  <Route exact path="/" component={Home} /></Switch>

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

代碼如下：

// AnimatedSwitch.less// 很多動(dòng)畫都需要給路由對(duì)應(yīng)組件最外層元素設(shè)置position: absolute;.route {  position: absolute;  left: 0;  top: 0;  width: 100%;  height: 100%;}// 幀動(dòng)畫.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.jsimport 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