詳解如何給React-Router添加路由頁面切換時(shí)的過渡動(dòng)畫
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)場動(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)各位去查閱官方文檔,這里只是簡單介紹一下它們各自的用途:
- <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)場動(dòng)畫,我覺得方式并不夠優(yōu)雅。我還是更傾向于封裝一個(gè)<AnimatedSwitch>組件來替換react-router自帶的<Switch>組件來實(shí)現(xiàn)路由跳轉(zhuǎn)時(shí)的轉(zhuǎn)場動(dòng)畫。
編寫過渡組件
實(shí)際代碼也非常的簡單
比如我們的路由長下面這個(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è)簡單的<AnimatedSwitch>組件的編寫就完成了。
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
React如何使用refresh_token實(shí)現(xiàn)無感刷新頁面
本文主要介紹了React如何使用refresh_token實(shí)現(xiàn)無感刷新頁面,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04react-dnd實(shí)現(xiàn)任意拖動(dòng)與互換位置
這篇文章主要為大家詳細(xì)介紹了react-dnd實(shí)現(xiàn)任意拖動(dòng)與互換位置,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08React?中使用?RxJS?優(yōu)化數(shù)據(jù)流的處理方案
這篇文章主要為大家介紹了React?中使用?RxJS?優(yōu)化數(shù)據(jù)流的處理方案示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02react-redux中connect()方法詳細(xì)解析
connect()是React-redux中的核心方法之一,它將react組件預(yù)redux中的Store真正連接在一起,下面這篇文章主要給大家介紹了react-redux中connect()方法的相關(guān)資料,文中介紹的非常詳細(xì),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起看看吧。2017-05-05一文詳解React Redux設(shè)計(jì)思想與工作原理
最近看項(xiàng)目中使用了?Redux,?便嘗試了解一波?Redux?的設(shè)計(jì)思想與工作原理,所以本文詳細(xì)的給大家介紹了Redux設(shè)計(jì)思想與工作原理,需要的朋友可以參考下2023-09-09React Hooks - useContetx和useReducer的使用實(shí)例詳解
這篇文章主要介紹了React Hooks - useContetx和useReducer的基本使用,本文通過實(shí)例代碼給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-11-11react-redux及redux狀態(tài)管理工具使用詳解
Redux是為javascript應(yīng)用程序提供一個(gè)狀態(tài)管理工具集中的管理react中多個(gè)組件的狀態(tài)redux是專門作狀態(tài)管理的js庫(不是react插件庫可以用在其他js框架中例如vue,但是基本用在react中),這篇文章主要介紹了react-redux及redux狀態(tài)管理工具使用詳解,需要的朋友可以參考下2023-01-01