```bash # npm npm install @kimdw-rtk/animation @kimdw-rtk/utils
npm install @kimdw-rtk/animation-test``bashnpm
npm install @kimdw-rtk/animation @kimdw-rtk/utils
Usage
Animated.* 컴포넌트는 아래와 같은 공통 props를 가지고 있습니다.
| props | type | default value | description |
| -------- | ------------------------------------------ | ------------- | ---------------------------------------- |
| duration | number | required | Anmiation 지속 시간 |
| delay | number | 0 | Animation 시작까지 지연 시간 |
| initial | string \| CSSProperties | required | Animation 시작 전에 적용할 스타일/클래스 |
| animate | string \| CSSProperties | required | Animation 마지막에 적용할 스타일/클래스 |
| easing | CSSProperties['animationTimingFunction'] | 'ease' | Animation timing function |$3
`tsx
import { Animated } from '@kimdw-rtk/animation';
hello, world!
;
`| props | type | default value | description |
| ----- | -------------------- | ------------- | ----------------------------------- |
| unit |
'letter' \| 'word' | 'letter' | Animation을 적용할 단위 (글자/단어) |$3
div를 wrapping 하여 animation을 적용하는 컴포넌트입니다.
`tsx
import { Animated } from '@kimdw-rtk/animation';
hello, world!
;
`$3
하위 요소에 직접 animation을 적용하는 컴포넌트입니다.
`tsx
import { Animated } from '@kimdw-rtk/animation'; initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
duration={500}
>
hello, world!
;
`$3
여러 요소에 개별의 animation을 적용할 때 사용하는 컴포넌트입니다.
`tsx
import { Animated } from '@kimdw-rtk/animation'; initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
duration={500}
delayGap={500}
>
hello,
world!
;
`| props | type | default value | description |
| ----------- | -------- | ------------- | ------------------------ |
| durationGap |
number | 0 | 요소마다 증가할 duration |
| delayGap | number | 0 | 요소마다 증가할 delay |$3
요소의 mount 뿐만 아니라 unmount 발생 시 Animation을 적용할 수 있습니다.
key를 기준으로 요소의 mount/unmount를 판별합니다.`tsx
import { useState } from 'react';import { CSSTransition, TransitionGroup } from '@kimdw-rtk/animation';
const [step, setStep] = useState(0);
key={step}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
duration={500}
>
;
`| props | type | default value | description |
| ----- | ------------------------- | ------------- | ------------------------------- |
| exit |
string \| CSSProperties` | required | unmount 시 적용할 스타일/클래스 |