Symbol

Overview

@shinyongjun/react-transition은 Node의 등장과 퇴장 애니메이션을 제공하는 리액트 컴포넌트 라이브러리 입니다.

특징

  • 다른 모듈에 의존하지 않아 가볍습니다.
  • 코드가 직관적이고 사용이 쉽습니다.

예제 코드

라이브러리의 간단한 사용 예제입니다.
import { Transition } from '@shinyongjun/react-transition'; import { useState } from 'react'; export default function App() { const [show, setShow] = useState(false); return ( <div> <button type="button" onClick={() => setShow(!show)}> Animation Toggler </button> <Transition show={show} duration={1000}> <div>Animation</div> </Transition> </div> ); }
CSS로 원하는 애니메이션을 추가해야 합니다.
.default-enter-active, .default-leave-active { transition: all 1s ease-in; } .default-enter-from, .default-leave-to { transform: translateX(20px); opacity: 0; }