react-transition 은 React 기반의 웹 애플리케이션에서 Node의 등장과 퇴장 애니메이션을 쉽게 구현할 수 있도록 도와주는 라이브러리 입니다.
- 컴포넌트를 사용하여 쉽게 애니메이션을 구현합니다.
- 등장과 퇴장 원하는 구간에 애니메이션을 적용합니다.
- name 속성을 사용하여 애니메이션을 커스텀 할 수 있습니다.
npm을 사용하여 설치할 수 있습니다.
npm install @shinyongjun/react-transition또는 yarn을 사용할 수도 있습니다.
yarn add @shinyongjun/react-transition라이브러리의 간단한 사용 예제 코드입니다.
import { Transition } from '@shinyongjun/react-transition';
import { useState } from 'react';
function App() {
const [show, setShow] = useState(false);
return (
<div>
<button type="button" onClick={() => setShow(!show)}>
Animation Toggler
</button>
<Transition show={show}>
<div>Animation</div>
</Transition>
</div>
);
}
export default App;.default-enter-active,
.default-leave-active {
transition: all 1s ease-in;
}
.default-enter-from,
.default-leave-to {
transform: translateX(20px);
opacity: 0;
}라이브러리의 주요 API들에 대한 문서를 Docs에서 확인할 수 있습니다.
라이브러리의 실제 사용 예시는 Demo에서 확인할 수 있습니다.
라이브러리에 대한 피드백이나 문제 신고는 GitHub Issues 페이지에서 제공합니다.