React 애니메이션의 세계 탐험: 소개

앱을 구축할 때 애니메이션은 앱과 사용자 간의 더 나은 상호 작용을 가능하게 하므로 전반적인 사용자 경험을 개선할 수 있는 좋은 방법입니다.

이전 React 튜토리얼 중 일부에서는 JSX, 라우팅, 양식과 같은 기본 React 개념에 익숙해졌습니다. 이 튜토리얼에서는 다음 단계로 나아가서 React의 애니메이션을 이해하려고 노력할 것입니다. React 애플리케이션에 애니메이션을 추가하는 방법에는 여러 가지가 있지만, 이 글에서는 React Transition Group과 이를 사용하는 방법에 중점을 둘 것입니다.

React의 애니메이션

React는 React 애플리케이션 애니메이션을 위한 많은 추가 유틸리티를 제공하며, 그 중 하나는 React 개발 팀에서 만든 React Transition Group입니다.

애니메이션 스타일 설정을 위한 라이브러리가 아니라 4가지 유형의 내장 구성 요소가 있는 하위 수준 API입니다. Transition、CSSTransition、SwitchTransition 和 TransitionGroup. 따라서 상태 변경 중에 DOM 안팎으로 React 구성 요소를 애니메이션화하는 것은 매우 간단합니다.

React Transition Group은 시작하기에 매우 간단한 도구이며, 가볍기 때문에 상용구 코드의 필요성을 줄여 개발 프로세스 속도를 높입니다.

시작하기

먼저 터미널에서 create-react-app 包安装 react를 사용해 보겠습니다.

으아아아

공용 폴더의 index.html 파일을 열고 다음과 같이 제목을 편집하세요.

으아아아

애플리케이션의 src 폴더 안에 comComponents 폴더를 생성하고 Home.js 파일을 생성해 봅시다. 다음으로 Home 的功能组件并渲染一个 h2라는 태그를 생성하여 이 파일을 업데이트합니다.

으아아아

다음으로 Home 구성 요소를 가져와 App.js 파일을 업데이트합니다.

으아아아

그런 다음 다음 명령을 실행하여 개발 서버를 시작합니다.

으아아아

React 전환 그룹 설정

먼저 프로젝트에 react-transition-group 패키지를 설치하여 React에서 간단한 애니메이션을 시도해 보겠습니다.

으아아아

다음으로 Home.js 파일의 react-transition-group 패키지에서 이전에 언급한 네 가지 구성 요소를 가져옵니다.

으아아아

다음으로 각 구성 요소가 어떻게 작동하는지 살펴보겠습니다.

转换구성 요소

Transition 구성 요소는 설치 및 제거 중에 구성 요소의 한 상태에서 다른 상태로의 전환을 정의하기 위한 API를 제공합니다.

이제 Home 组件中，将 h2 标签包装在 Transition 컴포넌트 내부에서 다음과 같이 코드를 업데이트하세요.

으아아아

Transition 标签，我们定义了动画发生的部分。我们还使用 inProp 状态为转换指定了 in 속성을 사용하면 전환 상태가 전환됩니다.

알다시피 위의 defaultStyle 和 Transition 组件中使用 timeout 속성에 애니메이션 지속 시간을 지정했습니다. 이는 React가 요소에서 애니메이션 클래스를 제거할 시기와 DOM에서 요소를 제거할 시기를 아는 방법이기 때문입니다.

위 변경 사항을 저장하고 페이지를 새로 고치세요. 페이지가 로드되면 몇 초 내에 애니메이션 텍스트를 볼 수 있습니다.

CSSTransition 구성요소

React 구성 요소에 CSS 기반 애니메이션을 구현하려고 할 때 CSSTransition 구성 요소가 유용합니다.

이 구성 요소는 Transition 구성 요소를 기반으로 하기 때문에 해당 구성 요소의 모든 props를 상속하고 여러 클래스를 사용하여 변환을 정의합니다.

작동 방식을 확인하기 위해 다음과 같이 index.css 파일에 다음 코드를 추가합니다.

으아아아

*-enter 到 *-exit-active부터 각 클래스는 구성 요소가 "enter", "enter", "exit" 및 "exit" 상태에 있을 때의 전환을 정의합니다.

그런 다음 Home.js에서 구성 요소 콘텐츠를 이전에 정의한 클래스와 함께 CSSTransition 标签中，传入 in 和 timeout 속성으로 래핑합니다.

으아아아

위의 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!