2019年，实现 React 动画的 5 种方式

动画是 ReactJs 应用程序中一个热门话题，我们有很多方法可以创建不同类型的动画。例如，很多开发人员就喜欢使用 css 动画。但如果你想创建更复杂的动画，你可以关注 GreenSock 。GreenSock 是最具影响力的动画平台，同时，它给 React 提供了很多用于创建动画的库或组件。

接下来，进入主题 ????。

1. CSS 动画

2. React-transition-group - 它是一个附加组件，用于实现基本的 CSS 动画和过渡动画。

3. react-animations - React-animations 实现 animate.css 的所有动画，且简单易用！

4. React Reveal -这是 React 的动画框架。

5. TweenOne - ant.design 中用于动画的库

…………………… …????
要查看回购，请单击此处。????
………………………????

当然，还有很多开源的动画库和组件，但是这篇文章不会涉及这些库。

????????让我们开始吧。

一、CSS 方法

这种方法是实现动画的最简单、最基础的方式。你不需要导入  JavaScript 库，并且浏览器花费的资源也是最少的。如果你需要实现一个简单的动画，并担心包的大小，可以使用此方法。

那么，如何使用 css 做动画喃？
  我们来看看左侧菜单栏示例：????

这里使用 css 属性和 className="is-nav-open" 标签实现侧边栏动画。

CSS 有很多方法实现该效果，其中之一是在导航组件上创建一个容器组件，并在点击时触发 margin 的更改。导航栏有固定的宽度 250px ，容器组件的 margin-left 或 translateX 也拥有相同宽度。当我们需要显示导航栏时，我们需要给容器组件设置 className="is-nav-open" 并且移动容器组件 margin-left/translateX: 0;

和 CSS 样式：

在大多数情况下，我们都会使用 CSS 来创建动画，因为它不需要在项目中导入大型库来实现动画，通常几行 css 以及 className 标签就能实现。

二、 ReactTransitionGroup

它是由 ReactJs 社区的人员开发的。ReactTransitionGroup 很容易实现基本的 CSS 动画和过渡动画。

开发人员将此库描述为：

“用于管理组件状态（包括安装和卸载）的一组组件，特别为动画而设计的。”

无论如何，关于它需要了解三件事：

• 当组件生命周期发生更改时，React Transition Group 会更改类。所以，应该在 CSS 上设置动画样式。

• ReactTransitionGroup 的包很小。在 React 应用程序中安装它，并不会显著增加项目包的体积。但你可以使用 CDN 。