成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

react實(shí)現(xiàn)頁(yè)面切換動(dòng)畫效果

wean / 1861人閱讀

摘要：或者復(fù)制出來修改再引用也許更好五片尾廣告請(qǐng)直接跳過個(gè)人小程序，歡迎體驗(yàn)

一.前情概要

注：（我使用的路由是react-router4）
? ? 如下圖所示，我們需要在頁(yè)面切換時(shí)有一個(gè)過渡效果，這樣就不會(huì)使頁(yè)面切換顯得生硬，用戶體驗(yàn)大大提升；

? ? but the 問題是，react的路由動(dòng)畫沒有vue那么方便，在vue里面寫幾個(gè)樣式就搞定了，在react里面，還要安裝插件；
? ?于是我就找了網(wǎng)上的一下方法，像react-addons-css-transition-group等等，又要安裝插件，又要改路由的結(jié)構(gòu)，又要搞什么vuex，又要判斷什么時(shí)候入場(chǎng)動(dòng)畫....
? ?我試了大概兩個(gè)方法后，不知道為什么都沒有成功...秋天不知不覺已經(jīng)來了，寒風(fēng)陣陣，不禁想起了vue..但我已經(jīng)回不了頭了；

二.峰回路轉(zhuǎn)

? ?就在這時(shí)，我在一篇文章找到了一個(gè)插件：

鏈接：使用react-router v4和react-transition-group實(shí)現(xiàn)頁(yè)面路由切換動(dòng)畫效果

? ? 這個(gè)是作者解決animated-transitions的bug后封裝好的父級(jí)組件
? ? 于是我打算放手試一試

三.乾坤一擲

? ? 使用起來非常簡(jiǎn)單，分成兩步
1.安裝：

  npm install react-animated-router --save

2.在項(xiàng)目中使用：

   import AnimatedRouter from "react-animated-router"; //我們的AnimatedRouter組件
   import "react-animated-router/animate.css"; //引入默認(rèn)的動(dòng)畫樣式定義

? ? 然后將路由組件 Switch替換為 AnimatedRouter 即可;
? ? 按照組件作者的文章完成這兩步后，就報(bào)錯(cuò)了：

? ? 歪？調(diào)彌歪？

四.破釜沉舟

? ? 個(gè)中曲折說來話長(zhǎng)，最后我才知道原來還要另外安裝兩個(gè)插件：

    npm install [email protected] --save
   npm install –save-dev prop-types

? ?然后，頁(yè)面就可以正常運(yùn)行不報(bào)錯(cuò)了，頁(yè)面切換效果也有了；感謝組件的作者
? ?需要補(bǔ)充的是，動(dòng)畫切換的樣式文件就在node_modulesreact-animated-routeranimate.css里，你可以根據(jù)自己的需要直接修改動(dòng)畫效果。
? ?或者復(fù)制出來修改再引用也許更好；

五.片尾廣告（請(qǐng)直接跳過）

個(gè)人小程序，歡迎體驗(yàn)：

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/108149.html

相關(guān)文章

  • 讓React應(yīng)用“動(dòng)”起來

    摘要：因?yàn)槠浣M件只是根據(jù)提供的及屬性，生成動(dòng)畫的數(shù)據(jù)，業(yè)務(wù)應(yīng)用中拿到生成的數(shù)據(jù)后根據(jù)需要添加需要?jiǎng)赢嫷慕M件樣式。除了上述簡(jiǎn)單的動(dòng)畫應(yīng)用，在復(fù)雜動(dòng)畫的實(shí)現(xiàn)方面，表現(xiàn)非常優(yōu)越。 WEB應(yīng)用中動(dòng)畫很重要 不管是web應(yīng)用還是原生應(yīng)用，也不論是PC端應(yīng)用還是移動(dòng)端應(yīng)用，動(dòng)畫都扮演了一個(gè)重要的角色。 盡管動(dòng)畫并不會(huì)添加應(yīng)用的實(shí)際動(dòng)能，但一個(gè)好的動(dòng)畫，一個(gè)流暢且優(yōu)雅，選擇在恰當(dāng)時(shí)機(jī)出現(xiàn)的動(dòng)畫，能為應(yīng)用增...

    xiyang 評(píng)論0 收藏0

  • 【譯】只需四個(gè)步驟：使用 React 實(shí)現(xiàn)頁(yè)面過渡動(dòng)畫

    摘要：翻譯瘋狂的技術(shù)宅作者英文標(biāo)題英文地址說明本文首發(fā)于公眾號(hào)在本文中，我將向你展示如何使用和庫(kù)中的生命周期方法來實(shí)現(xiàn)頁(yè)面的過渡效果。我們還用創(chuàng)建了一個(gè)變量，可以用它來對(duì)封裝的子組件中的的不同樣式屬性實(shí)現(xiàn)動(dòng)畫效果。用渲染，并且或者插入動(dòng)畫狀態(tài)值。 翻譯：瘋狂的技術(shù)宅作者：Martin Haagensli英文標(biāo)題：Animated page transitions with React Rou...

    moven_j 評(píng)論0 收藏0

  • 精讀《怎么用 React Hooks 造輪子》

    摘要：可以看到，這樣不僅沒有占用組件自己的，也不需要手寫回調(diào)函數(shù)進(jìn)行處理，這些處理都?jí)嚎s成了一行。效果通過拿到周期才執(zhí)行的回調(diào)函數(shù)。實(shí)現(xiàn)等價(jià)于的回調(diào)僅執(zhí)行一次時(shí)，因此直接把回調(diào)函數(shù)拋出來即可。 1 引言 上周的 精讀《React Hooks》 已經(jīng)實(shí)現(xiàn)了對(duì) React Hooks 的基本認(rèn)知，也許你也看了 React Hooks 基本實(shí)現(xiàn)剖析（就是數(shù)組），但理解實(shí)現(xiàn)原理就可以用好了嗎？學(xué)的是...

    Shihira 評(píng)論0 收藏0

  • GitHub 值得收藏的前端項(xiàng)目[每月更新...]

    摘要：也是一款優(yōu)秀的響應(yīng)式框架站點(diǎn)所使用的一套框架為微信服務(wù)量身設(shè)計(jì)的一套框架一組很小的，響應(yīng)式的組件，你可以在網(wǎng)頁(yè)的項(xiàng)目上到處使用一個(gè)可定制的文件，使瀏覽器呈現(xiàn)的所有元素，更一致和符合現(xiàn)代標(biāo)準(zhǔn)。 GitHub 值得收藏的前端項(xiàng)目 整理與收集的一些比較優(yōu)秀github項(xiàng)目，方便自己閱讀，順便分享出來，大家一起學(xué)習(xí)，本篇文章會(huì)持續(xù)更新，版權(quán)歸原作者所有。歡迎github star與fork 預(yù)...

    maxmin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<