在ReactJs应用程序中实现动画是一个热门的话题，有许多不同的方法可以创建不同类型的动画。许多开发人员使用CSS并将类添加到HTML标签中来创建动画，这是一种很好的方式，您应该使用它。如果您想创建复杂的动画，可以考虑使用GreenSock。GreenSock是最强大的动画平台之一。此外，还有许多用于在React中创建动画的库和组件。
让我们来谈谈它们吧 😎
Css方式：
- React-transition-group - 这是一个添加组件，用于实现基本CSS动画和过渡的附加组件。
- react-animations - React-animations 实现了 animate.css 的所有动画。使用简单！
- React Reveal - 这是一个适用于 React 的动画框架。
- TweenOne - 这是一个用于动画的库，ant.design 使用它。
当然，开源社区拥有更多的动画库和组件，我可以帮你探索它们。但是，本文不会包含这些库。文章结尾还会有一个奖励，推荐一些值得关注的库。
一、CSS方式 这种方法非常适合创建简单的动画。相比导入JavaScript库，使用这种方法可以保持较小的捆绑包大小，减少浏览器资源的消耗。这两点也在很大程度上影响应用程序的性能。如果您担心捆绑包大小，同时需要创建简单的动画，请注意这种方法。
我想向您展示如何使用CSS进行动画效果。让我们看看汉堡菜单的示例：👇
这个菜单使用CSS属性和触发className="is-nav-open"的HTML标记非常容易使用。实现此示例的方法有很多种。其中一种方法是在导航上方创建一个包装器，并在margin上触发更改。导航的宽度固定为250px。包装器使用相同宽度的margin-left或translateX属性。当我们需要显示导航时，我们需要为包装器添加className="is-nav-open"，并将包装器移动到margin-left/translateX: 0的位置。
Css styles:
相信我，在大多数情况下使用这种方法是必要的。我们最好编写几行CSS代码并触发className，而不是导入大型库并将其实现在我们的项目中。用户会感激你，因为你的应用程序可以更快地在浏览器上播放。
有时候，你必须使用其他方法。还有其他什么方法吗？让我们看一下下一个方法。
二、ReactTransitionGroup
这个附加组件是由ReactJs社区的开发者开发的。ReactTransitionGroup非常容易实现基本的CSS动画和过渡效果。
开发者将这个库描述为：
这是一个用于管理组件状态（包括挂载和卸载）的一组组件，特别为动画设计而开发的。
无论如何，你需要知道以下三点关于这个附加组件：
- React Transition Group在组件生命周期改变时改变类。因此，动画样式应该在CSS类中描述。
- ReactTransitionGroup的大小很小。它应该被安装在React应用程序包中，不会显著增加你的捆绑包。但你也可以使用CDN。
- ReactTransitionGroup有三个组件（Transition、CSSTransition和TransitionGroup）。为了获得动画效果，你需要在它们中包装组件。 让我们看一下如何制作类似的动画👀👇
首先，你需要从react-transition-group中导入CSSTransitionGroup。之后，你需要将列表包装在其中，并设置transitionName属性。每当在CSSTransitionGroup中的子元素被添加或删除时，它都会获得动画样式。
如果你设置transitionName="example"属性，样式表中的类应该以example名称开头。
你可以看到基本用法ReactTransitionGroup版本。👀
这就是你需要的一切。当然，你需要添加一些逻辑。我们应该描述两种实现我们的示例联系人列表的方法：
handleAdd — 添加新联系人，它获取一个随机名称并将其推送到数组状态.items中。(它使用random-name包来获取随机名称)
handleRemove — 通过state.items数组中的索引删除联系人。
