探索 React 动画的世界：简介

redmaomail 2024-07-24 21:54 阅读数 61 #wordpress

探索 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文件并编辑标题，如下所示：

<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;

登录后复制