Terokai dunia animasi React: pengenalan

Apabila membina apl, animasi ialah cara yang bagus untuk meningkatkan keseluruhan pengalaman pengguna kerana ia membenarkan interaksi yang lebih baik antara apl dan pengguna.

Dalam beberapa tutorial React kami yang terdahulu, anda menjadi biasa dengan konsep React asas seperti JSX, penghalaan dan borang. Dalam tutorial ini, kami akan membawanya ke peringkat seterusnya dan cuba memahami animasi dalam React. Walaupun terdapat banyak cara untuk menambah animasi pada aplikasi React anda, kami akan menumpukan pada React Transition Group dan cara menggunakannya dalam artikel ini.

Animasi dalam React

React menyediakan banyak utiliti tambahan untuk menganimasikan aplikasi React, salah satunya dipanggil React Transition Group, yang dicipta oleh pasukan pembangunan React.

Ia bukan perpustakaan untuk menetapkan gaya animasi sebaliknya, ia adalah API peringkat rendah dengan empat jenis komponen terbina dalam: Transition, CSSSTransition, SwitchTransition dan TransitionGroup. Oleh itu, sangat mudah untuk menghidupkan komponen React ke dalam dan keluar dari DOM semasa perubahan keadaan. 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

React Transition Group ialah alat yang sangat mudah untuk dimulakan, dan kerana ia ringan, ia mengurangkan keperluan untuk kod boilerplate, mempercepatkan proses pembangunan.

Mulakan🎜 🎜Mula-mula, mari pasang react menggunakan pakej create-react-app dalam terminal. 🎜

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

🎜Buka fail index.html folder awam dan edit tajuk seperti berikut: 🎜

 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>

🎜Mari buat folder yang dipanggil komponen di dalam folder src aplikasi dan buat fail Home.js. Seterusnya, kami mengemas kini fail ini dengan mencipta komponen berfungsi yang dipanggil Home dan memberikan teg h2. 🎜

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

🎜Seterusnya, kemas kini fail App.js dengan mengimport komponen Home: 🎜

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>

🎜Kemudian, mulakan pelayan pembangunan dengan menjalankan arahan berikut: 🎜

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;

🎜Tetapan Kumpulan Peralihan React🎜 🎜Mula-mula mari cuba animasi ringkas dalam React dengan memasang pakej react-transition-group ke dalam projek. 🎜 rrreee 🎜Seterusnya, kami mengimport empat komponen yang disebut sebelum ini daripada pakej react-transition-group dalam fail Home.js. 🎜 rrreee 🎜Seterusnya, kita akan melihat cara setiap komponen berfungsi. 🎜

Tukar komponen🎜 🎜Komponen Transition menyediakan API untuk mentakrifkan peralihan komponen dari satu keadaan ke keadaan lain semasa pemasangan dan penyahpasangan. 🎜 🎜Sekarang, dalam komponen Home, bungkus teg h2 dalam Transition komponen dan kemas kini kod seperti ini. rrreee 🎜Menggunakan teg Transition, kami mentakrifkan bahagian di mana animasi itu berlaku. Kami juga menentukan sifat in untuk peralihan menggunakan keadaan inProp, yang menogol keadaan peralihan. 🎜 🎜Seperti yang anda perhatikan, kami menggunakan dalam komponen <code class="inline">defaultStyle dan Transition di atas The timeout menentukan tempoh animasi. Ini kerana ini adalah cara React mengetahui bila hendak mengalih keluar kelas animasi daripada elemen dan bila hendak mengalih keluar elemen daripada DOM. 🎜 🎜Simpan perubahan di atas dan muat semula halaman. Setelah halaman dimuatkan, anda sepatutnya dapat melihat teks animasi dalam beberapa saat. 🎜 Komponen

CSSSTransition🎜 🎜Komponen CSSSTransition amat berguna apabila cuba melaksanakan animasi berasaskan CSS dalam komponen React. 🎜 🎜Oleh kerana komponen ini berdasarkan komponen Transition, ia mewarisi semua prop komponen tersebut dan juga menggunakan beberapa kelas untuk menentukan peralihan. 🎜 🎜Untuk melihat cara ia berfungsi, kami menambah kod berikut pada fail index.css seperti yang ditunjukkan di bawah: 🎜 rrreee 🎜Daripada *-enter kepada *-exit-active, setiap kelas menentukan sama ada komponen itu "masuk" atau "masuk" , peralihan pada status "keluar" dan "keluar". 🎜 🎜Kemudian, dalam Home.js, kami membungkus kandungan komponen ke dalam teg CSSSTransition, menghantar in / code> dan atribut <code class="inline">timeout dan kelas yang kami takrifkan sebelum ini: 🎜 rrreee 🎜Sila ambil perhatian bahawa atribut classNames di atas mempunyai nilai react-animasi yang digunakan pada semua kelas yang ditentukan. 🎜 Kelas

TukarPeralihan🎜 🎜Seperti namanya, komponen ini berguna apabila anda ingin menukar pemaparan antara peralihan keadaan berdasarkan mod yang dipilih (input-output atau output-input). Ia berguna apabila anda mahu satu komponen menjadi pudar apabila komponen lain dimasukkan. 🎜

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

Atas ialah kandungan terperinci Terokai dunia animasi React: pengenalan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!