### [探索 React 动画的世界：简介](https://www.prosaas.cn/article/4655)

**Published:** 2023-09-03T04:25:13

**Author:** 5201314

**Excerpt:** 在构建应用程序时，动画是改善整体用户体验的好方法，因为它们允许应用程序和用户之间进行更好的交互。 在我们之前的…

![](//zhiqipro.oss-cn-beijing.aliyuncs.com/2023/12/20231212123136331.jpg)

在构建应用程序时，动画是改善整体用户体验的好方法，因为它们允许应用程序和用户之间进行更好的交互。

在我们之前的一些 React 教程中，您熟悉了基本的 React 概念，例如 JSX、路由和表单。在本教程中，我们将把它提升到一个新的水平，并尝试理解 React 中的动画。虽然有很多方法可以向 React 应用程序添加动画，但我们将在本文中重点介绍 React Transition Group 以及如何使用它。

## React 中的动画

React 提供了许多用于动画 React 应用程序的附加实用程序，其中之一称为 React Transition Group，由 React 开发团队创建。

它不是一个设置动画样式的库；相反，它是一个具有四种类型内置组件的低级 API：`Transition`、`CSSTransition`、`SwitchTransition` 和 `TransitionGroup`。因此，在状态更改期间将 React 组件动画移入和移出 DOM 非常简单。

React Transition Group 是一个非常简单的入门工具，而且由于它是轻量级的，因此可以减少对样板代码的需求，从而加快开发过程。

## 开始使用

首先，让我们在终端中使用 `create-react-app` 包安装 `react` 。

npx create-react-app react-animations

打开公共文件夹的**index.html**文件并编辑标题，如下所示：

<title>TutsPlus - React Animations</title>

让我们在应用程序的 **src** 文件夹中创建一个名为 **components** 的文件夹，并创建一个 **Home.js** 文件。接下来，我们通过创建一个名为 `Home` 的功能组件并渲染一个 `h2` 标签来更新此文件。

import React from "react";

const Home = () => {
  return (
    <>
      <h2>{"TutsPlus - Welcome to React Animations!"}</h2>
    </>
  );
};

export default Home;

接下来，通过导入 `Home` 组件来更新 **App.js** 文件：

import React from "react";
import Home from "./components/Home";

const App = () => {
  return (
    <>
      <Home />
    </>
  );
};

export default App;

然后，通过运行以下命令启动开发服务器：

npm run start

## 反应过渡组设置

让我们首先在 React 中尝试一个简单的动画，方法是将 `react-transition-group` 包安装到项目中。

npm install react-transition-group

接下来，我们从 **Home.js** 文件中的 `react-transition-group` 包导入前面提到的四个组件。

import {Transition, CSSTransition, SwitchTransition, TransitionGroup} from "react-transition-group";

接下来，我们将了解每个组件的工作原理。

### `转换`组件

`Transition` 组件提供了一个 API，用于定义组件在安装和卸载期间从一种状态到另一种状态的转换。

现在，在 `Home` 组件中，将 `h2` 标签包装在 `Transition` 组件中，并像这样更新代码。

import React, { useState } from "react";

const duration = 300;

const defaultStyle = {
  transition: \`opacity ${duration}ms ease-in-out\`,
  opacity: 0,
};

const transitionStyles = {
  entering: { opacity: 1 },
  entered: { opacity: 1 },
  exiting: { opacity: 0 },
  exited: { opacity: 0 },
};

const Home = () => {
  const \[inProp, setInProp\] = useState(false);
  return (
    <>
      <div>
        <Transition in={inProp} timeout={300}>
          {(state) => (
            <h2
              style={{
                ...defaultStyle,
                ...transitionStyles\[state\],
              }}
            >
              {"TutsPlus - Welcome to React Animations"}
            </h2>
          )}
        </Transition>
        <button onClick={() => setInProp(!inProp)}>
          Click to {inProp ? "Exit" : "Enter"}
        </button>
      </div>
    </>
  );
};

export default Home;

使用 `Transition` 标签，我们定义了动画发生的部分。我们还使用 `inProp` 状态为转换指定了 `in` 属性，这会切换转换状态。

正如您所注意到的，我们在上面的 `defaultStyle` 和 `Transition` 组件中使用 `timeout` 属性指定了动画持续时间。这是因为 React 就是这样知道何时从元素中删除动画类以及何时从 DOM 中删除元素的。

保存以上更改并刷新页面。页面加载后，几秒钟内您就应该能够看到动画文本。

### `CSSTransition` 组件

当尝试在 React 组件中实现基于 CSS 的动画时，`CSSTransition` 组件会派上用场。

因为该组件基于 `Transition` 组件，所以它继承了该组件的所有 props，并且还使用几个类来定义转换。

要了解其工作原理，我们将以下代码添加到 **index.css** 文件中，如下所示：

.react-animations-enter {
  opacity: 0;
}
.react-animations-enter-active {
  opacity: 1;
  transition: opacity 200ms;
}
.react-animations-exit {
  opacity: 1;
}
.react-animations-exit-active {
  opacity: 0;
  transition: opacity 200ms;
}

从 `*-enter` 到 `*-exit-active`，每个类定义了组件处于“进入”、“进入”、“退出”时的转换，和“退出”状态。

然后，在 **Home.js** 中，我们将组件内容包装到 `CSSTransition` 标签中，传入 `in` 和 `timeout` 属性以及我们之前定义的类：

<div>
    <CSSTransition
        in={displayText}
        timeout={300}
        classNames="react-animations"
        unmountOnExit
    >
        <h2>{"TutsPlus - Welcome to CSSTransition"}</h2>
    </CSSTransition>
        <button onClick={() => setDisplayText(!displayText)}>
          Display Text
        </button>
</div>

请注意，上面的 `classNames` 属性有一个 `react-animations` 值，该值适用于定义的所有类。

### `SwitchTransition` 类

顾名思义，当您想要根据选定的模式（输入-输出或输出-输入）在状态转换之间切换渲染时，此组件非常有用。当您希望一个组件在插入另一个组件时淡出时，它会很有用。

要访问此实用程序的属性，我们还将组件的内容包装在 `SwitchTransition` 标记中。还需要注意的是，`SwitchTransition` 应与 `Transition` 或 `CSSTransition` 组件一起使用。

让我们将以下代码添加到 `index.css` 文件中，如下所示来创建我们的类：

.fade-enter{
   opacity: 0;
}

.fade-exit{
   opacity: 1;
}

.fade-enter-active{
   opacity: 1;
}

.fade-exit-active{
   opacity: 0;
}

.fade-enter-active,
.fade-exit-active{
   transition: opacity 500ms;
}

让我们看看它是如何工作的，从 out-in 模式开始，这是默认模式：

 const \[state, setState\] = useState(false);
 
   <SwitchTransition>
     <CSSTransition
       key={state ? "Did you Enjoy our Tutorial?" : "Welcome to TutsPlus"}
       addEndListener={(node, done) => node.addEventListener("transitionend", done, false)}
       classNames='fade'
     >
       <button onClick={() => setState(state => !state)}>
         {state ? "Did you Enjoy our Tutorial?" : "Welcome to TutsPlus"}
       </button>
     </CSSTransition>
   </SwitchTransition>

上面代码中的 `key` 属性会跟踪组件中的状态，而 `addEndListener` 属性会阻止组件几乎立即翻转。如果没有它，看起来就像没有实现动画一样。

接下来是输入输出模式，其中 `SwitchTransition` 标记采用 `mode` 属性以及 `in-out` 值。现在更新您的代码以查看其工作原理：

<SwitchTransition mode={"in-out"}>
    {Code goes here}
</SwitchTransition>

### 过渡组

该组件有助于管理列表中的 `Transition` 或 `CSSTransition` 组件。以下是如何应用它的示例。

像这样更新**Home.js**：

const \[items, setItems\] = useState(\["Manal"\]);

const CONTACTS = \["Jane", "Fred", "John", "Doe", "Brown"\];

const onAddContacts = () => {
    const newItem = CONTACTS.find((item) => !items.includes(item));
    
    if (newItem) {
      setItems((prev) => \[...prev, newItem\]);
    }
};

<div>
      <TransitionGroup>
        <h2>Contacts</h2>
        {items.map((item, index) => (
          <CSSTransition key={index} timeout={900} classNames="fade">
            <p>{item}</p>
          </CSSTransition>
        ))}
        <button onClick={onAddContacts}>Add a Contact</button>
      </TransitionGroup>
    </div>

保存以上内容并刷新页面。单击该按钮，该项目应添加到带有动画的列表中。

从上面的代码中，我们初始化了一个名为 `CONTACTS` 的静态 `data` 集。然后，定义了一个 `onAddContacts` 函数，该函数将处理添加新联系人的操作，并在按钮上触发。

列表中的每个项目都包含在 `CSSTransition` 标记中，以对新插入的项目进行动画处理。最后，该组件被包装在 `TransitionGroup` 组件中以管理其中包含的转换。

这是完整的 **Home.js** 组件：

import React, { useState } from "react";

import {
  Transition,
  CSSTransition,
  SwitchTransition,
  TransitionGroup
} from "react-transition-group";

const duration = 300;

const defaultStyle = {
  transition: \`opacity ${duration}ms ease-in-out\`,
  opacity: 0,
};

const transitionStyles = {
  entering: { opacity: 1 },
  entered: { opacity: 1 },
  exiting: { opacity: 0 },
  exited: { opacity: 0 },
};

const Home = () => {
  const \[inProp, setInProp\] = useState(false);
  const \[displayText, setDisplayText\] = useState(false);
  const \[state, setState\] = useState(false);

  const \[items, setItems\] = useState(\["Manal"\]);

  const CONTACTS = \["Jane", "Fred", "John", "Doe", "Brown"\];

  const onAddContacts = () => {
    const newItem = CONTACTS.find((item) => !items.includes(item));
    if (newItem) {
      setItems((prev) => \[...prev, newItem\]);
    }
  };

  return (
    <>
      <div>
        <Transition in={inProp} timeout={300}>
          {(state) => (
            <h2
              style={{
                ...defaultStyle,
                ...transitionStyles\[state\],
              }}
            >
              {"TutsPlus - Welcome to React Animations"}
            </h2>
          )}
        </Transition>
        <button onClick={() => setInProp(!inProp)}>
          Click to {inProp ? "Exit" : "Enter"}
        </button>
      </div>

      <div>
        <CSSTransition
          in={displayText}
          timeout={300}
          classNames="react-animations"
          unmountOnExit
        >
          <h2>{"TutsPlus - Welcome to CSSTransition"}</h2>
        </CSSTransition>
        <button onClick={() => setDisplayText(!displayText)}>
          Display Text
        </button>
      </div>

      <div>
        <SwitchTransition mode={"in-out"}>
          <CSSTransition
            key={state ? "Did you Enjoy our Tutorial?" : "Welcome to TutsPlus"}
            addEndListener={(node, done) =>
              node.addEventListener("transitionend", done, false)
            }
            classNames="fade"
          >
            <button onClick={() => setState((state) => !state)}>
              {state ? "Did you Enjoy our Tutorial?" : "Welcome to TutsPlus"}
            </button>
          </CSSTransition>
        </SwitchTransition>
      </div>

      <div>
      <TransitionGroup>
        <h2>Contacts</h2>
        {items.map((item, index) => (
          <CSSTransition key={index} timeout={900} classNames="fade">
            <p>{item}</p>
          </CSSTransition>
        ))}
        <button onClick={onAddContacts}>Add a Contact</button>
      </TransitionGroup>
    </div>
    </>
  );
};

export default Home;

## 总结

在本教程中，您了解了如何开始在 React 中使用动画。您创建了一个简单的 React 应用程序，并了解了如何实现四个 React Transition Group 组件。有关 React 动画的深入信息，我建议阅读官方文档。

本教程的源代码可在 GitHub 上获取。

以上就是探索 React 动画的世界：简介的详细内容，更多请关注知企PROSAAS其它相关文章！

**Tags:** css, dom, github, html, JS, transition, 继承

**Categories:** WordPress

---