在构建应用程序时，动画是改善整体用户体验的好方法，因为它们允许应用程序和用户之间进行更好的交互。
在我们之前的一些 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></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> {"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" you enjoy our tutorial : 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> {"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" you enjoy our tutorial : 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 上获取。
