探索 React 动画的世界：简介-＆＃＆按-PHP中文网

探索 React 动画的世界：简介

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

在我们之前的一些 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文件并编辑标题，如下所示：

TutsPlus - React Animations

登录后复制

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

import React from "react"; const Home = () => { return ( <> {"TutsPlus - Welcome to React Animations!"}
  ); }; export default Home;

登录后复制

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

import React from "react"; import Home from "./components/Home"; const App = () => { return ( <>   ); }; 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 ( <>   {(state) => (  {"TutsPlus - Welcome to React Animations"} 
 )}   
  ); }; 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属性以及我们之前定义的类：

  {"TutsPlus - Welcome to CSSTransition"}

登录后复制

请注意，上面的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);   node.addEventListener("transitionend", done, false)} classNames='fade' >

登录后复制

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

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

 {Code goes here}

登录后复制

过渡组

该组件有助于管理列表中的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]); } };   Contacts
 {items.map((item, index) => (  {item}
  ))}

登录后复制

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

从上面的代码中，我们初始化了一个名为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 ( <>   {(state) => (  {"TutsPlus - Welcome to React Animations"} 
 )}   
   {"TutsPlus - Welcome to CSSTransition"}
   
    node.addEventListener("transitionend", done, false) } classNames="fade" >    
   Contacts
 {items.map((item, index) => (  {item}
  ))}   
  ); }; export default Home;