Entdecken Sie die Welt der React-Animation: eine Einführung

Beim Erstellen einer App sind Animationen eine großartige Möglichkeit, das gesamte Benutzererlebnis zu verbessern, da sie eine bessere Interaktion zwischen der App und dem Benutzer ermöglichen.

In einigen unserer vorherigen React-Tutorials haben Sie sich mit grundlegenden React-Konzepten wie JSX, Routing und Formularen vertraut gemacht. In diesem Tutorial gehen wir auf die nächste Ebene und versuchen, Animationen in React zu verstehen. Obwohl es viele Möglichkeiten gibt, einer React-Anwendung Animationen hinzuzufügen, konzentrieren wir uns in diesem Artikel auf die React Transition Group und deren Verwendung.

Animation in React

React bietet viele zusätzliche Dienstprogramme zum Animieren von React-Anwendungen, eines davon heißt React Transition Group und wurde vom React-Entwicklungsteam erstellt.

Es handelt sich nicht um eine Bibliothek zum Festlegen von Animationsstilen, sondern um eine Low-Level-API mit vier Arten integrierter Komponenten: Transition、CSSTransition、SwitchTransition 和 TransitionGroup. Daher ist es sehr einfach, React-Komponenten während Zustandsänderungen in das DOM hinein und aus diesem heraus zu animieren.

React Transition Group ist ein sehr einfaches Einstiegstool. Da es leichtgewichtig ist, ist weniger Boilerplate-Code erforderlich, was den Entwicklungsprozess beschleunigt.

Loslegen Sie

Zuerst verwenden wir create-react-app 包安装 react im Terminal.

npx create-react-app react-animations

Öffnen Sie die Datei index.html des öffentlichen Ordners und bearbeiten Sie den Titel wie folgt:

<title>TutsPlus - React Animations</title>

Lassen Sie uns einen Ordner namens components im Ordner src der Anwendung erstellen und eine Datei Home.js erstellen. Als Nächstes aktualisieren wir diese Datei, indem wir ein Tag namens Home 的功能组件并渲染一个 h2 erstellen.

import React from "react";

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

export default Home;

Als nächstes aktualisieren Sie die Datei HomeApp.js, indem Sie die -Komponente importieren:

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

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

export default App;

Dann starten Sie den Entwicklungsserver, indem Sie den folgenden Befehl ausführen:

npm run start

Einstellungen der Übergangsgruppe reagieren

Versuchen wir zunächst eine einfache Animation in React, indem wir das react-transition-group-Paket im Projekt installieren.

npm install react-transition-group

Als nächstes importieren wir die vier zuvor genannten Komponenten aus dem -Paket in die Datei Home.jsreact-transition-group.

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

Als nächstes schauen wir uns an, wie jede Komponente funktioniert.

转换Komponenten

Transition Komponenten bieten eine API zum Definieren des Übergangs einer Komponente von einem Zustand in einen anderen während der Installation und Deinstallation.

Aktualisieren Sie nun innerhalb der Home 组件中，将 h2 标签包装在 Transition-Komponente den Code wie folgt.

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;

Verwenden Sie das Attribut Transition 标签，我们定义了动画发生的部分。我们还使用 inProp 状态为转换指定了 in, dadurch wird der Übergangszustand umgeschaltet.

Wie Sie bemerkt haben, haben wir die Animationsdauer oben im Attribut defaultStyle 和 Transition 组件中使用 timeout angegeben. Dies liegt daran, dass React auf diese Weise weiß, wann Animationsklassen aus einem Element und wann ein Element aus dem DOM entfernt werden muss.

Speichern Sie die oben genannten Änderungen und aktualisieren Sie die Seite. Sobald die Seite geladen ist, sollten Sie innerhalb weniger Sekunden animierten Text sehen können.

CSSTransition Komponenten

Wenn Sie versuchen, CSS-basierte Animationen in React-Komponenten zu implementieren, sind CSSTransition-Komponenten praktisch.

Da diese Komponente auf der Transition-Komponente basiert, erbt sie alle Requisiten von dieser Komponente und verwendet außerdem mehrere Klassen zum Definieren von Transformationen.

Um zu sehen, wie das funktioniert, fügen wir der Datei index.css den folgenden Code hinzu:

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

Von *-enter 到 *-exit-active aus definiert jede Klasse den Übergang, wenn sich die Komponente im Status „enter“, „enter“, „exit“ und „exit“ befindet.

Dann verpacken wir in Home.js den Komponenteninhalt in CSSTransition 标签中，传入 in 和 timeout Eigenschaften zusammen mit der Klasse, die wir zuvor definiert haben:

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

Bitte beachten Sie den classNames 属性有一个 react-animations-Wert oben, dieser Wert gilt für alle definierten Klassen.

SwitchTransition Klasse

Wie der Name schon sagt, ist diese Komponente nützlich, wenn Sie das Rendering zwischen Zustandsübergängen basierend auf dem ausgewählten Modus (Eingabe-Ausgabe oder Ausgabe-Eingabe) umschalten möchten. Dies ist nützlich, wenn Sie möchten, dass eine Komponente ausgeblendet wird, wenn eine andere Komponente eingefügt wird.

要访问此实用程序的属性，我们还将组件的内容包装在 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 上获取。

Das obige ist der detaillierte Inhalt vonEntdecken Sie die Welt der React-Animation: eine Einführung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!