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

总结

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

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

以上是探索 React 動畫的世界：簡介的詳細內容。更多資訊請關注PHP中文網其他相關文章！