@kimdw-rtk/animation

Installation

``bash


npm

npm install @kimdw-rtk/animation @kimdw-rtk/utils

pnpm

pnpm add @kimdw-rtk/animation @kimdw-rtk/utils

yarn

yarn add @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}
>
setStep((prev) => prev + 1)}>{step}

;
`

| props | type | default value | description |
| ----- | ------------------------- | ------------- | ------------------------------- |
| exit | string \| CSSProperties` | required | unmount 시 적용할 스타일/클래스 |