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

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

react-transition-group

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

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

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

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

編寫過渡組件

實(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>來實(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.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>，使其具有動(dòng)態(tài)更換子路由的能力。

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

<!-- App.js -->

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

至此，一個(gè)簡(jiǎn)單的<AnimatedSwitch>組件的編寫就完成了。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論