React アニメーションの世界を探索する: 概要

アプリケーションを構築する場合、アニメーションはアプリケーションとユーザー間の対話を改善するため、全体的なユーザー エクスペリエンスを向上させる優れた方法です。

これまでの React チュートリアルの一部では、JSX、ルーティング、フォームなどの React の基本的な概念については理解できました。このチュートリアルでは、次のレベルに進み、React のアニメーションを理解しようとします。 React アプリケーションにアニメーションを追加する方法はたくさんありますが、この記事では React Transition Group とその使用方法に焦点を当てます。

React でのアニメーション

React は、React アプリケーションをアニメーション化するための追加ユーティリティを多数提供しています。そのうちの 1 つは、React 開発チームによって作成された React Transition Group と呼ばれます。

これはアニメーション スタイルを設定するためのライブラリではなく、4 種類の組み込みコンポーネント (Transition、CSSTransition、) を備えた低レベル API です。 SwitchTransition と TransitionGroup。したがって、状態の変更中に React コンポーネントを DOM に出入りさせるアニメーションを作成するのは非常に簡単です。

React Transition Group は非常に簡単に始めることができるツールであり、軽量であるため定型コードの必要性が減り、開発プロセスがスピードアップします。

使い始める

まず、ターミナルの create-react-app パッケージを使用して react をインストールしましょう。

リーリー

パブリック フォルダーの index.html ファイルを開き、タイトルを次のように編集します。 リーリー

アプリケーションの

src フォルダー内に components というフォルダーを作成し、Home.js ファイルを作成しましょう。次に、Home という機能コンポーネントを作成し、h2 タグをレンダリングすることで、このファイルを更新します。 リーリー

次に、

Home コンポーネントをインポートして、App.js ファイルを更新します。 リーリー 次に、次のコマンドを実行して開発サーバーを起動します:

リーリー

React トランジション グループの設定

まず、プロジェクトに

react-transition-group

パッケージをインストールして、React で簡単なアニメーションを試してみましょう。 リーリー 次に、前述の 4 つのコンポーネントを

Home.js

ファイルの react-transition-group パッケージからインポートします。 リーリー 次に、各コンポーネントがどのように機能するかを理解します。

変換

コンポーネント

遷移

コンポーネントは、インストールおよびアンインストール中にコンポーネントのある状態から別の状態への遷移を定義するための API を提供します。 次に、

Home

コンポーネントで、Transition コンポーネントの h2 タグをラップし、コードを次のように更新します。 リーリー

Transition

タグを使用して、アニメーションが発生する部分を定義します。また、遷移状態を切り替える inProp 状態を使用して、遷移の in プロパティを指定します。 お気づきのとおり、上記の

defaultStyle

コンポーネントと Transition コンポーネントの timeout プロパティを使用してアニメーションの継続時間を指定しました。これは、React が要素からアニメーション クラスを削除する時期と DOM から要素を削除する時期を知る方法であるためです。 上記の変更を保存し、ページを更新します。ページが読み込まれると、数秒以内にアニメーション化されたテキストが表示されるようになります。

CSSTransition

コンポーネント #CSSTransition

コンポーネントは、React コンポーネントに CSS ベースのアニメーションを実装しようとする場合に便利です。

このコンポーネントは Transition

コンポーネントに基づいているため、そのコンポーネントのすべてのプロパティを継承し、いくつかのクラスを使用してトランジションを定義します。

これがどのように機能するかを理解するために、次のコードを index.css

ファイルに追加します。

リーリー -enter

から

*-exit-active まで、各クラスはコンポーネントが「enter」、「enter」、「exit」、および「exit」のときの遷移を定義します。 " 状態。 次に、Home.js

で、コンポーネントのコンテンツを

CSSTransition タグにラップし、in プロパティと timeout プロパティを渡します。先ほど定義したクラス: リーリー 上記の classNames

属性には、定義されているすべてのクラスに適用される

react-animations 値があることに注意してください。 SwitchTransition

クラス

名前が示すように、このコンポーネントは、選択したモード (入力-出力または出力-入力) に基づいて状態遷移間でレンダリングを切り替える場合に便利です。これは、別のコンポーネントが挿入されたときに 1 つのコンポーネントをフェードアウトしたい場合に便利です。

要访问此实用程序的属性，我们还将组件的内容包装在 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 中国語 Web サイトの他の関連記事を参照してください。