【React】620- 爲React應用製作動畫的5種方法

ReactJS應用程序中的動畫是一個流行的話題，有很多方法可以創建不同類型的動畫。許多開發人員只使用CSS和向HTML標記添加類來創建動畫。這是一個好方法，您應該使用它，如果要創建複雜的動畫，可以關注GreenSock，GreenSock是最強大的動畫平臺。還有很多庫用於在React中創建動畫的組件。

讓我們來看看他們 ????

CSS方法
React-transition-group ——它是用於簡單實現基本CSS動畫和過渡的附加組件。
react-animations — react-animations實現了animate.css中的所有動畫。簡單易用！
React Reveal — 這是React的動畫框架。
TweenOne — 用於ant.design的動畫庫（重點）。

查看倉庫，點擊此處^[1]

當然，開源社區有更多的動畫庫和組件。

????‍???? 讓我們開始吧。

1. CSS 方法

對於簡單的動畫，此方法是最好的方法之一。當您使用它而不是導入javascript庫時，您的包很小，並且瀏覽器花費更少的資源，這兩點也在很大程度上影響了應用程序的性能。如果你的動畫很簡單並且擔心你的包的大小，請注意這個方法。

我想向您展示如何使用CSS製作動畫。

讓我們看一下漢堡菜單示例：????

該菜單易於使用，具有css屬性，併爲html標籤觸發 className=“is-nav-open”，有很多方法可以實現這個示例。其中一種方法是在導航上方創建一個包裝器(wrapper)，並觸發頁邊距margin的更改，導航的寬度爲 250px。並且包裝器的margin-left 或 translateX 屬性具有相同的寬度。當需要顯示導航時，我們必須爲包裝器添加 className=“is-nav-open” 並將包裝器移至 margin-left/translateX:0 上。

CSS樣式：

相信我，在大多數情況下使用這個方法是必要的，我們最好編寫幾行css並觸發className，而不是導入大型庫在項目中實現他。

但有時，您必須使用其他方法。還有其他方法嗎？讓我們來看看下一種方法。

2.ReactTransitionGroup

這個附加組件是由ReactJs社區的人員開發的，ReactTransitionGroup易於實現基本的CSS動畫和過渡。

開發人員將此庫描述爲：

一組用於管理組件狀態(包括隨時間的掛載和卸載)的組件，設計時特別考慮了動畫。

無論如何，您需要了解有關該附加組件的三件事：

當組件生命週期更改時，ReactTransitionGroup會更改類。反過來，動畫樣式應該在CSS類中描述。
ReactTransitionGroup的大小很小。它應該安裝在React應用程序的軟件包中，並且不會大大增加您的捆綁包。但是您可以使用CDN。
ReactTransitionGroup具有3個組件（Transition，CSSTransition和TransitionGroup）。爲了獲得動畫，您需要將組件包裝在其中。

讓我們來看看如何製作類似的動畫 ????????

首先，您需要從 react-transition-group 導入 CSSTransitionGroup。之後，您必須將列表包裝其中並設置 transitionName 屬性。每當添加或刪除 CSSTransitionGroup 中的子級時，它將獲得動畫樣式。

如果設置 transitionName = “example” props，則樣式表中的類應以示例名稱開頭。

當然，您需要添加一些邏輯。我們應該爲示例聯繫人列表的實現描述兩種方法：

handleAdd —添加新的聯繫人，它將獲得一個隨機名稱並將其推送到數組state.items（它使用隨機名稱包作爲名稱）。
handleRemove —通過state.items數組中的索引刪除聯繫人。

3. React-animations

React-animations^[2]——該庫基於animate.css 所構建。它易於使用，並且有很多動畫集合。React-animation可與支持使用對象定義關鍵幀動畫（例如Radium，Aphrodite或樣式化組件）的任何內聯樣式庫一起使用。我更喜歡使用樣式組件。

下面是一些動畫：????????

一旦你看到這些動畫，你就會意識到你可以在哪裏使用它們。

讓我們看看它是如何工作的。例如：反彈動畫。

當組件被創建時，您需要爲動畫包裝任何HTML或組件。

例子

動畫有效，這個動畫很簡單。

4️. React-reveal

React Reveal^[3]是React的動畫框架。它具有基本的動畫，例如淡入淡出，翻轉，縮放，旋轉以及許多更高級的動畫。它允許您使用props控制所有動畫，例如：位置，延遲，距離，級聯等。您可以在這裏^[4]看到它們，您也可以使用自定義CSS效果。它還具有服務器端渲染和高階組件。如果您更喜歡滾動使用動畫，則可以使用此框架。看看它是如何工作的。