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

这种方法是实现动画的最简单、最基础的方式。你不需要导入  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 标签就能实现。

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

开发人员将此库描述为：

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

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

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

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

• ReactTransitionGroup有 3 个组件（Transition，CSSTransition 和 TransitionGroup ）。为了获得动画，你需要将组件包裹在这 3 个类中。

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

首先，你需要导入 CSSTransitionGroup 的 react-transition-group 。

然后你需要将列表包装在其中并设置 transitionName props。每当 CSSTransitionGroup 添加或删除子项时，它将获得动画样式。

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

这就是 ReactTransitionGroup 的基本用法。

这就是你需要的一切。当然，你可以添加一些逻辑。

我们用两种方法来实现我们的示例联系人列表：

handleAdd - 添加新的联系人，它获得一个随机名称并将其 push 到数组 state.items 。

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

React-animations  - 该库是使用 animate.css 构建的所有动画。它易于使用，并有很多动画集合。React-animation 适用于任何支持使用对象定义关键帧动画的内联样式库，例如 Radium，Aphrodite 或样式组件。我更喜欢使用样式组件。

你可以在gif上看到一些动画：

我知道你的想法

一旦你看到这些动画，你就会意识到你可以在哪里使用它们。
  我们来看看它是如何工作的。例如 - Bounce动画。

第一件事就是导入动画所需的 react-animations。

正如我之前提到的，在使用动画样式和基本关键帧创建容器组件之后，我使用了样式组件。

创建组件时，你需要包装任何 HTML 或动画组件。

例：

这个动画就实现了，很容易，也很简单。

这里介绍一个处理滚动动画很好的库 - react-animate-on-scroll。