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;
}