反应JS |过渡组

虽然 React 管理不同的组件及其行为以使任何 Web 应用程序具有交互性，但它不包含为应用程序本身添加美感的方法。动画被认为是向应用程序添加美感的最常用方法之一，我们可以使用称为React 过渡组的显式组件组向 React 应用程序添加动画。

过渡组的开发人员将其定义为，

A set of components for managing component states (including mounting and unmounting) over time, specifically designed with animation in mind.

你可以通过使用 React Transition Group 来改进 UI：

您可以使用以下命令在项目组件中安装过渡组：

npm install react-transition-group --save

您可以使用以下命令在项目组件中导入过渡组件：

import { Transition } from 'react-transition-group';

在继续实施过渡组之前，我们必须考虑以下一些关键点。

重要注意事项：

我们可以使用 React 过渡组实现的动画是纯CSS 过渡，即它不使用 JavaScript 的任何属性来为组件设置动画。动画是通过定义具有不同 CSS 样式的类以及在组件生命周期中的指定点装备和取消装备类来完成的。
React 旨在用于创建 Web 应用程序，开发人员认为最好将动画等其他附加功能分开以保持 React 的轻量级。因此，为了使用过渡组，我们需要单独安装它，我们将在本文后面介绍。
React Transition 组由三个主要组件Transition 、 CSSTransition和TransitionGroup组成，我们将在本文后面简要介绍它们，并将实现 CSSTransition 组件，因为它很受欢迎。
React Transition Group 仅由组件组成，即为了对任何一组组件或 HTML 元素实现动画，我们必须首先将它们包装在三个现有组件中的任何一个中。
最后，让我们了解过渡组的工作原理。 React Transition Group 组件将任何其他子组件的生命周期划分为特定阶段，开发人员可以选择在这些阶段中添加特定类，时间跨度称为Timeout 。这就是 JavaScript 的使用结束的地方。现在剩下的就是让开发人员为类赋予不同的样式并为动画添加 CSS 过渡。

React 过渡组的组件：

正如我们之前所讨论的，React Transition 组由三个主要组件Transition 、 CSSTransition和TransitionGroup组成。现在让我们简要描述以下内容。

Transition ：Transition 组件有一个简单的 API，可以让开发人员描述随着时间的推移从一个组件状态到另一个状态的转换。它主要用于动画组件的安装和卸载，但也可用于创建更复杂的动画。
根据Transition Component，一个Transition可以分为四个主要阶段：
- 进入
- 进入
- 退出
- 退出
CSSTransition ：顾名思义，这个过渡组件依赖于 CSS 过渡和动画。它的灵感来自 ng-animate 库。根据 CSSTransition 组件，一个过渡可以分为三个主要阶段：
- 出现
- 进入
- 出口
TransitionGroup ：TransitionGroup 组件用于管理列表中的一组 Transition 组件，与 Transition 组件本身类似，TransitionGroup 不直接设置动画它是一个状态机，因为它跟踪组件的当前状态在即安装或卸载。
TransitionGroup 组件主要用于在一个组件中拥有不同的动画，这可以通过在一个 TransitionGroup 组件中包装几个 Transition 组件来实现。 TransitionGroup 可以包含任何可用的组件。更多关于 TransitionGroup 组件的内容将在以后的文章中讨论。
现在我们已经了解了 React Transition Group 是什么以及它的组件是什么。我们应该使用每个组件并详细查看它们以及一些示例。最后，我们将创建一个非常简单的应用程序来总结我们学到的东西。

参考：