Explorez le monde de l'animation React : une introduction-WordPresse-php.cn

探索 React 动画的世界：简介

Lors de la création d'une application, les animations sont un excellent moyen d'améliorer l'expérience utilisateur globale car elles permettent une meilleure interaction entre l'application et l'utilisateur.

Dans certains de nos précédents didacticiels React, vous vous êtes familiarisé avec les concepts de base de React tels que JSX, le routage et les formulaires. Dans ce tutoriel, nous allons passer au niveau supérieur et essayer de comprendre les animations dans React. Bien qu'il existe de nombreuses façons d'ajouter des animations à votre application React, nous nous concentrerons sur React Transition Group et sur la façon de l'utiliser dans cet article.

Animation en React

React fournit de nombreux utilitaires supplémentaires pour animer les applications React, dont l'un s'appelle React Transition Group, créé par l'équipe de développement de React.

Il ne s'agit pas d'une bibliothèque permettant de définir des styles d'animation ; il s'agit plutôt d'une API de bas niveau avec quatre types de composants intégrés : Transition、CSSTransition、SwitchTransition 和 TransitionGroup. Par conséquent, il est très simple d'animer les composants React dans et hors du DOM lors des changements d'état.

React Transition Group est un outil très simple pour démarrer, et parce qu'il est léger, il réduit le besoin de code passe-partout, accélérant ainsi le processus de développement.

Commencer

Tout d’abord, utilisons create-react-app 包安装 react dans le terminal.

npx create-react-app react-animations

Copier après la connexion

Ouvrez le fichier index.html du dossier public et modifiez le titre comme suit :

<title>TutsPlus - React Animations</title>

Copier après la connexion

Créons un dossier appelé components dans le dossier src de l'application et créons un fichier Home.js. Ensuite, nous mettons à jour ce fichier en créant une balise appelée Home 的功能组件并渲染一个 h2.

import React from "react";

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

export default Home;

Copier après la connexion

Ensuite, mettez à jour le fichier HomeApp.js en important le composant :

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

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

export default App;

Copier après la connexion

Ensuite, démarrez le serveur de développement en exécutant la commande suivante :

npm run start

Copier après la connexion

Paramètres du groupe de transition React

Essayons d'abord une animation simple dans React en installant le package react-transition-group dans le projet.

npm install react-transition-group

Copier après la connexion

Ensuite, nous importons les quatre composants mentionnés précédemment du package dans le fichier Home.jsreact-transition-group.

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

Copier après la connexion

Ensuite, nous examinerons le fonctionnement de chaque composant.

`转换`Composants

Transition Les composants fournissent une API permettant de définir la transition d'un composant d'un état à un autre lors de l'installation et de la désinstallation.

Maintenant, à l'intérieur du composant Home 组件中，将 h2 标签包装在 Transition, mettez à jour le code comme ceci.

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;

Copier après la connexion

Utilisez l'attribut Transition 标签，我们定义了动画发生的部分。我们还使用 inProp 状态为转换指定了 in, cela basculera l'état de transition.

Comme vous l'avez remarqué, nous avons précisé la durée de l'animation dans l'attribut defaultStyle 和 Transition 组件中使用 timeout ci-dessus. En effet, c'est ainsi que React sait quand supprimer les classes d'animation d'un élément et quand supprimer un élément du DOM.

Enregistrez les modifications ci-dessus et actualisez la page. Une fois la page chargée, vous devriez pouvoir voir du texte animé en quelques secondes.

`CSSTransition` Composants

CSSTransition Les composants sont utiles lorsque vous essayez d'implémenter des animations basées sur CSS dans les composants React.

Comme ce composant est basé sur le composant Transition, il hérite de tous les accessoires de ce composant et utilise également plusieurs classes pour définir des transformations.

Pour voir comment cela fonctionne, nous ajoutons le code suivant au fichier index.css comme suit :

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

Copier après la connexion

À partir de *-enter 到 *-exit-active, chaque classe définit la transition lorsque le composant est dans l'état "enter", "enter", "exit" et "exit".

Ensuite, dans Home.js, nous enveloppons le contenu du composant dans CSSTransition 标签中，传入 in 和 timeout propriétés avec la classe que nous avons définie précédemment :

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

Copier après la connexion

Veuillez noter la valeur classNames 属性有一个 react-animations ci-dessus, cette valeur s'applique à toutes les classes définies.

`SwitchTransition` cours

Comme son nom l'indique, ce composant est utile lorsque vous souhaitez basculer le rendu entre les transitions d'état en fonction du mode sélectionné (entrée-sortie ou sortie-entrée). C'est utile lorsque vous souhaitez qu'un composant disparaisse lorsqu'un autre composant est inséré.

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

Copier après la connexion

让我们看看它是如何工作的，从 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>

Copier après la connexion

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

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

<SwitchTransition mode={"in-out"}>
    {Code goes here}
</SwitchTransition>

Copier après la connexion

过渡组

该组件有助于管理列表中的 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>

Copier après la connexion

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

从上面的代码中，我们初始化了一个名为 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;

Copier après la connexion