为React应用制作动画的5种方法

ReactJS应用程序中的动画是一个流行的话题，有很多方法可以创建不同类型的动画。许多开发人员只使用CSS和向HTML标记添加类来创建动画。这是一个好方法，您应该使用它，如果要创建复杂的动画，可以关注GreenSock，GreenSock是最强大的动画平台。还有很多库用于在React中创建动画的组件。

让我们来看看他们 :sunglasses:

1. CSS方法

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

3. react-animations —react-animations实现了animate.css中的所有动画。简单易用！

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

5. TweenOne — 用于ant.design的动画库（重点）。

查看仓库，点击 此处 ^[1]

当然，开源社区有更多的动画库和组件。

:man:‍:computer: 让我们开始吧。

1. CSS 方法

对于简单的动画，此方法是最好的方法之一。当您使用它而不是导入javascript库时，您的包很小，并且浏览器花费更少的资源，这两点也在很大程度上影响了应用程序的性能。如果你的动画很简单并且担心你的包的大小，请注意这个方法。

我想向您展示如何使用CSS制作动画。

让我们看一下汉堡菜单示例：:point_down:

该菜单易于使用，具有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）。为了获得动画，您需要将组件包装在其中。

让我们来看看如何制作类似的动画 :eyes::point_down:

首先，您需要从 react-transition-group 导入 CSSTransitionGroup 。之后，您必须将列表包装其中并设置 transitionName 属性。每当添加或删除 CSSTransitionGroup 中的子级时，它将获得动画样式。

如果设置 transitionName = “example” props，则样式表中的类应以示例名称开头。

当然，您需要添加一些逻辑。我们应该为示例联系人列表的实现描述两种方法：

• handleAdd—添加新的联系人，它将获得一个随机名称并将其推送到数组state.items（它使用随机名称包作为名称）。

• handleRemove—通过state.items数组中的索引删除联系人。