首頁 >web前端 >js教程 >react如何實現頁面切換的效果

react如何實現頁面切換的效果

不言
不言原創
2018-08-14 15:38:314555瀏覽

這篇文章帶給大家的內容是關於react如何實現頁面切換的效果,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

一.前情摘要

註:(我使用的路由是react-router4)
     如下圖所示,我們需要在頁面切換時有一個過渡效果,這樣就不會讓頁面切換顯得生硬,使用者體驗大幅提升;
react如何實現頁面切換的效果
     but the 問題是,react的路由動畫沒有vue那麼方便,在vue裡面寫幾個樣式就搞定了,在react裡面,還要安裝插件;
   於是我就找了網上的一下方法,像react-addons-css-transition-group等等,又要安裝插件,又要改路由的結構,又要搞什麼vuex,又要判斷什麼時候入場動畫....
   我試了大概兩個方法後,不知道為什麼都沒有成功...秋天不知不覺已經來了,寒風陣陣,不禁想起了vue..但我已經回不了頭了;

二.峰迴路轉

   就在這時,我在一篇文章找到了一個插件:

連結:使用react-router v4和react-transition-group實現頁面路由切換動畫效果

    這個是作者解決animated-transitions的bug後封裝好的父級元件
    於是我打算放手試試看

三.乾坤一擲

    使用起來非常簡單,分成兩步驟
1.安裝:

  npm install react-animated-router --save

2.在專案中使用:

   import AnimatedRouter from 'react-animated-router'; //我们的AnimatedRouter组件
   import 'react-animated-router/animate.css'; //引入默认的动画样式定义

    接著將路由元件Switch替換為AnimatedRouter 即可;
    依照元件作者的文章完成這兩步驟後,就報錯了:
react如何實現頁面切換的效果

四.破釜沉舟


    個中曲折說來話長,最後我才知道原來還要另外安裝兩個插件:

    npm install react-transition-group@2.3.0 --save
   npm install –save-dev prop-types
   然後,頁面就可以正常運行不報錯了,頁面切換效果也有了;感謝元件的作者

   需要補充的是,動畫切換的樣式檔案就在node_modulesreact-animated-routeranimate.css裡,你可以依照自己的需求直接修改動畫效果。

   或複製出來修改再引用也許更好;

#相關文章推薦:

React-Native Mobx實現商城APP

React Native實作驗證碼倒數功能

activity切換動畫和頁面切換動畫_html/css_WEB-ITnose

### #HTML5單一頁面手勢滑幕切換如何實現######

以上是react如何實現頁面切換的效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn