한즈엔!모드 애니메이션 설치!

다음은 React에서 CSS 애니메이션을 처리하는 라이브러리입니다.
React-transion-group
애니메이션 자체를 제공하는 것이 아니라 CSS가 DOM에 반영되는 시기를 관리하여 애니메이션을 실현하는 프로그램 라이브러리입니다.네 개의 구성 요소를 준비했다.

Transition

CSSTransition

SwitchTransition

TransitionGroup

만들고 싶은 애니메이션에 따라 구분해서 사용해야 한다.
공식.
설치하다.

# npm
npm install react-transition-group

# yarn
yarn add react-transition-group

설치 모드
이번에는 CSStransition과 StyledComponent를 사용하여 모드를 구현합니다.
실제 행동은 여기에 있다.

이 모드의 애니메이션은 덮어쓰기와 모드 주체 두 부분으로 구성되어 있다.중첩은 페이드와 페이드를 포함하고 모드 바디는 페이드와 페이드 외에 확대와 축소를 포함한다.
그럼 전선 좀 봅시다.

import './App.css';
import {CSSTransition} from "react-transition-group";
import {useState} from "react";
import styled from "styled-components";

export const App = () => {
  const [isOpen, switchIsOpen] = useState(false)

  return (
    <>
      <TransitionStyle>
        <div className="open" onClick={() => switchIsOpen(true)}>開く</div>
        <div className="modal-wrapper">
          <CSSTransition
            classNames="modal"
            in={isOpen}
            timeout={700}
            unmountOnExit>
            <ModalStyle>
              <div className="content">
                モーダルです。
              </div>
              <div className="close" onClick={() => switchIsOpen(false)}>閉じる</div>
            </ModalStyle>
          </CSSTransition>
        </div>
        <CSSTransition
          classNames="overlay"
          in={isOpen}
          timeout={700}
          unmountOnExit>
          <OverlayStyle/>
        </CSSTransition>
      </TransitionStyle>
    </>
  );
}

export default App

// transitionのスタイル
const TransitionStyle = styled.div`
  .open{
    cursor: pointer;
    font-size: 40px;  
    font-weight: bold;
  }

  .modal-wrapper{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    .modal-enter {
      opacity: 0;
      transform: scale(0.9);
    }

    .modal-enter-active {
      opacity: 1;
      transform: translateX(0);
      transition: opacity 0.3s, transform 0.3s;
    }

    .modal-exit {
      opacity: 1;
    }

    .modal-exit-active {
      opacity: 0;
      transition: opacity 0.3s, transform 0.3s;
      transform: scale(0.9);
    }
  }

  .overlay-enter {
    opacity: 0;
  }

  .overlay-enter-active {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.3s, transform 0.3s;
  }

  .overlay-exit {
    opacity: 1;
  }

  .overlay-exit-active {
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
  }
`;

// モーダルのスタイル
const ModalStyle = styled.div`
  padding: 100px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .content{
    font-size: 40px;
    font-weight: bold;
  }

  .close{
    cursor: pointer;
    margin: 50px 0 0;
  }
`

// オーバーレイのスタイル
const OverlayStyle = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
`;

덮어쓰기는 모드 바디에 사용되는 CSStransition과 동일한 속성이므로 모드 바디의 예를 들어 설명합니다.
in은 숨겨진 디스플레이를 전환하는 데 사용되는 상태를 통과합니다.
timeout은 애니메이션의 시작부터 끝까지의 시간입니다.
마지막 unmount On Exit는 애니메이션이 끝날 때 CSStransition을 제거할 수 있습니다.
그리고 CSStransition에 children을 건네주는 것은 모달 주체입니다.덮어쓰기도 마찬가지입니다.

<CSSTransition
  classNames="modal"
  in={isOpen}
  timeout={700}
  unmountOnExit>
  <ModalStyle>
    <div className="content">
      モーダルです。
    </div>
    <div className="close" onClick={() => switchIsOpen(false)}>閉じる</div>
  </ModalStyle>
</CSSTransition>

classNames에 전달된 문자열은 애니메이션 클래스 이름의 접두어입니다.

例
classNames="modal"

アニメーション開始時のクラス名="modal-enter"
アニメーション中のクラス名="modal-enter-active"
アニメーション終了時のクラス名="modal-exit"
アニメーション中のクラス名="modal-exit-active"

상기 클래스의 코드를 사용합니다.

.modal-enter {
  opacity: 0;
  transform: scale(0.9);
}

.modal-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.3s, transform 0.3s;
}

.modal-exit {
  opacity: 1;
}

.modal-exit-active {
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  transform: scale(0.9);
}

모드 전환 상태를 진짜로 설정하면modal-enter 스타일로 마운트하고modal-enter-active 스타일로 전환합니다.
가짜라면modal-exit 스타일에 적응하여modal-exit-active로 전환하고 마운트 해제할 수 있습니다.
총결산
모드 이외에 다른 구성 요소를 사용하여 각종 운동을 실현하는 애니메이션도 할 수 있다.스스로 css를 써서 실현하기 위해 유연성이 높은 애니메이션을 제작할 수 있습니다.꼭 사용해 보세요.