react實現頁面切換動畫效果

wean 發布于2019-08-26 12:10 / 1858人閱讀

摘要：或者復制出來修改再引用也許更好五片尾廣告請直接跳過個人小程序，歡迎體驗

一.前情概要

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

? ? 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 即可;
? ? 按照組件作者的文章完成這兩步后，就報錯了：

? ? 歪？調彌歪？

四.破釜沉舟

? ? 個中曲折說來話長，最后我才知道原來還要另外安裝兩個插件：

    npm install react-transition-group@2.3.0 --save
   npm install –save-dev prop-types

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

五.片尾廣告（請直接跳過）

個人小程序，歡迎體驗：

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108149.html

讓React應用“動”起來

摘要：因為其組件只是根據提供的及屬性，生成動畫的數據，業務應用中拿到生成的數據后根據需要添加需要動畫的組件樣式。除了上述簡單的動畫應用，在復雜動畫的實現方面，表現非常優越。 WEB應用中動畫很重要不管是web應用還是原生應用，也不論是PC端應用還是移動端應用，動畫都扮演了一個重要的角色。盡管動畫并不會添加應用的實際動能，但一個好的動畫，一個流暢且優雅，選擇在恰當時機出現的動畫，能為應用增...

xiyang 2019-08-22 16:47 評論0 收藏0
【譯】只需四個步驟：使用 React 實現頁面過渡動畫

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

moven_j 2019-08-20 18:34 評論0 收藏0
精讀《怎么用 React Hooks 造輪子》

摘要：可以看到，這樣不僅沒有占用組件自己的，也不需要手寫回調函數進行處理，這些處理都壓縮成了一行。效果通過拿到周期才執行的回調函數。實現等價于的回調僅執行一次時，因此直接把回調函數拋出來即可。 1 引言上周的精讀《React Hooks》已經實現了對 React Hooks 的基本認知，也許你也看了 React Hooks 基本實現剖析（就是數組），但理解實現原理就可以用好了嗎？學的是...

Shihira 2019-08-26 13:22 評論0 收藏0
GitHub 值得收藏的前端項目[每月更新...]

摘要：也是一款優秀的響應式框架站點所使用的一套框架為微信服務量身設計的一套框架一組很小的，響應式的組件，你可以在網頁的項目上到處使用一個可定制的文件，使瀏覽器呈現的所有元素，更一致和符合現代標準。 GitHub 值得收藏的前端項目整理與收集的一些比較優秀github項目，方便自己閱讀，順便分享出來，大家一起學習，本篇文章會持續更新，版權歸原作者所有。歡迎github star與fork 預...

maxmin 2019-08-29 16:07 評論0 收藏0