作者 | Dmitry Nozhenko 来源 | Medium Javascript，请点击“阅读原文”获取作者更多优质文章
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 属性，并为 html 标签触发 className="is-nav-open"。有许多方法可以实现此示例。其中之一是在导航上方创建包装器并触发边距更改。导航的宽度等于 250px。 并且包装器的 margin-left 或 translateX 属性具有相同的宽度。当需要显示导航时，我们必须为包装器添加 className="is-nav-open" 并将包装器移至
margin-left/translateX:0; 上。
css 样式:
相信我，在大多数情况下都必须使用此方法。与导入大型库并在项目中实现它相比，我们最好编写几行css行并触发className。用户将感谢您的浏览器快速复制应用程序。
但有时，您必须使用其他方法。还有其他方法吗？让我们来看看下一种方法。
2. ReactTransitionGroup
这个附加组件是由ReactJs社区的人员开发的。ReactTransitionGroup易于实现基本的CSS动画和过渡。
开发人员将此库描述为：
“用于管理随时间推移的组件状态（包括安装和卸载）的一组组件，这些组件是专门为动画而设计的。”
您需要了解有关该附加组件的三件事：
• 当组件生命周期更改时，React Transition Group 会更改类。反过来，应在CSS类中描述动画样式。
• ReactTransitionGroup的大小很小。它应该安装在React应用程序的软件包中，并且不会大大增加您的包大小。但是您可以使用CDN。
• ReactTransitionGroup 具有3个组件（Transition，CSSTransition和TransitionGroup）。为了获得动画，您需要将组件包装在其中。
让我们来看看如何制作类似的动画👀👇
首先，您需要从react-transition-group导入CSSTransitionGroup。之后，您必须用其来包装列表并设置transitionName属性。每当添加或删除CSSTransitionGroup中的子级时，它将获得动画样式。
如果设置 transitionName="example" 属性，则样式表中的类应以示例名称开头。
您可以看到基本用法ReactTransitionGroup版本。 👀
这就是您需要做的一切。当然，您需要添加一些逻辑。我们应该为联系人列表的实现描述两种方法：
• handleAdd — 添加新的联系人，它将获得一个随机名称并将其推送到数组 state.items。（它使用随机名称包作为随机名称）
• handleRemove — 通过state.items数组中的索引删除联系人。
3. React-animations
React-animations - 该库基于带有animate.css的所有动画构建。它易于使用，并且有很多动画集合。React-animation 可与支持使用对象定义关键帧动画（例如Radium，Aphrodite或样式组件）的任何内联样式库一起使用。 我更喜欢使用样式化的组件。
您可以在下面的gif上看到一些动画：👀👇
我知道你的想法😄
看到这些动画后，您就知道可以在哪里使用它们了。
让我们看看它是如何工作的。例如-反弹动画。
首先需要从 react-animations 中导入选定的动画。
正如我之前提到的，在创建具有动画样式和基本关键帧的包装组件之后，我将使用样式组件。
创建组件后，您需要包装任何HTML或用于动画的组件。
示例：
这个动画很简单。
在滚动上使用此动画有一些很好的解决方案 - react-animate-on-scroll。
4. React-reveal
React Reveal是React的动画框架。它具有基本的动画，例如淡入淡出，翻转，缩放，旋转以及许多更高级的动画。它允许您使用道具控制所有动画，例如：位置，延迟，距离，级联等。您可以在这里看到它们。您也可以使用自定义CSS效果。它还具有服务端渲染和高阶组件。如果您更喜欢滚动使用动画，则可以使用此框架。 看看它是如何工作的。
让我们看一下该动画的滚动效果。👀👇
我们有5个区块，每个区块都有一个全屏页面和一个标题。
我们创建animateList常量。该数组包含5个元素。使用数组方法映射后，您可以呈现Fade组件中的每个元素，并将我们的项目插入标题。Const样式在我们的图块和标题中具有短的CSS样式。顶部有5个带有Fade动画的方块。
5. TweenOne和Ant Design中的动画。
Ant Design 是一个React UI库，其中包含大量易于使用的组件。它是用于构建优雅的用户界面的有用组件。由阿里巴巴（Alibaba）开发，并已在许多大公司中使用：阿里巴巴（当然），腾讯，百度等。
您可能已经听说过Ant设计，所以请在其目标网页上考虑其动画。👇
如您所见，有很多动画元素。我想给你看一个简短的版本，因为所有元素都有相似的动画。我选择了带有绿色球和一个元素（例如红色正方形）作为背景的地球仪。我们的动画看起来像这样。
我在此动画中使用了TweenOne组件，但它需要PathPlugin才能在动画中使用路径。当您将PathPlugin推到TweenOne.plugins时，它将起作用。
下一步，我们将描述基本动画参数：
• duration - 时间动画（以毫秒为单位），
• ease - 动画 ease，
• yoyo-每次重复向前和向后交替。
• repeat — 重复动画。您必须将-1用于不确定的过程。
• p — 动画的路径坐标
• easePath — 动画的缓动路径坐标
您无需担心该svg的最后两个参数。
接下来，我们将创建一个动画对象。 该对象具有3种动画类型：
• redSquare - 它具有循环参数（如下所述）以及Y坐标，持续时间和延迟。
• greenBall — 它具有对象参数x，y为值p的路径。
• path - easePath坐标。
• lengthPixel — 将曲线划分为400个部分。
• track — 椭圆，其轴具有循环样式和旋转参数。
您无需担心此代码。 您必须注意TweenOne组件。让我们简短地提醒一下，这些组件将从 rc-tween-one 中导入。与基础属性和动画属性一起用作基本组件。这是我们的动画！每个TweenOne都有自己的动画规则，例如redSquare，track，greenBall。
看起来很吓人。但是实际上，您需要注意这些行。
如您所见，使用此方法创建动画是一种简单的方法。您所需要做的就是描述动画规则，并将其转移到TweenOne组件中。
结论
有许多使用动画的方法。所有这些都需要不同的方法。今天，我们已经看了一些可以在项目中使用的方法。您可以选择适合您的方法👨
