PS: 本篇文章使用的React-Router版本為react-router-dom: ^5.0.0 (兼容4.x)
使用過Vue2的同學們應該都知道<transition>這個內置組件，它可以幫我們添加過渡動畫，之前一直用它來給Vue-Router路由的跳轉添加轉場動畫，使用起來非常便捷。那在React中應該如何給路由切換添加過渡動畫呢？
react-transition-group
我們需要借助React的官方動畫庫react-transition-group，文檔戳這里
react-transition-group提供了三個React組件，分別是<Transition>，<CSSTransition>以及<TranstionGroup>，關于它們的詳細api還請各位去查閱官方文檔，這里只是簡單介紹一下它們各自的用途：
關于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.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其中值得注意的是用到了<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>至此，一個簡單的<AnimatedSwitch>組件的編寫就完成了。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
