Design Docs
RevealAnimation컨텐츠를 부드럽게 나타내거나 사라지게 하는 애니메이션 컴포넌트입니다. 높이와 투명도 애니메이션을 지원하며, 한 번만 재생하거나 반복 재생할 수 있습니다.
Basic Reveal버튼을 클릭하여 애니메이션을 확인하세요
With DelaydelaySecond prop으로 애니메이션 시작을 지연시킬 수 있습니다
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| animationKey | string | Yes | 애니메이션을 식별하는 고유 키 (localStorage에 재생 여부 저장) | |
| initial | string | { height: 0, opacity: 0 } | - | 애니메이션 시작 상태 (height, opacity) |
| animate | string | { height: 'auto', opacity: 1 } | - | 애니메이션 종료 상태 (height, opacity) |
| transition | string | { duration: 0.3, ease: 'easeInOut' } | - | 애니메이션 전환 설정 (duration, ease) |
| delaySecond | number | 0 | - | 애니메이션 시작 지연 시간 (초) |
| onAnimationComplete | string | undefined | - | 애니메이션 완료 시 실행될 콜백 함수 |
| shouldAlwaysPlayAnimation | boolean | false | - | 항상 애니메이션을 재생할지 여부 (false면 한 번만 재생) |
| customStyle | string | {} | - | 커스텀 CSS 스타일 객체 |
| customClassName | string | {} | - | 커스텀 Panda CSS 클래스 |
| children | string | Yes | 애니메이션이 적용될 자식 요소 |