useSlideDown

@hua-labs/hua/motion

위에서 아래로 슬라이드 인 애니메이션

설치

bash

npm install @hua-labs/hua

Import

tsx

import { useSlideDown } from "@hua-labs/hua/framework";

@hua-labs/motion-core의 모션 훅을 @hua-labs/hua/framework에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

기본 사용법

tsx

const slideDown = useSlideDown({ duration: 700, delay: 100 });

return (
  <div ref={slideDown.ref} style={slideDown.style}>
    Slides in from top to bottom
  </div>
);

API 레퍼런스

옵션

이름	타입	기본값	설명
duration	number	700	docs:hooks.use-slide-down.options.duration
delay	number	0	docs:hooks.use-slide-down.options.delay
distance	number	50	docs:hooks.use-slide-down.options.distance
threshold	number	0.1	docs:hooks.use-slide-down.options.threshold
triggerOnce	boolean	true	docs:hooks.use-slide-down.options.triggerOnce
easing	string	"ease-out"	docs:hooks.use-slide-down.options.easing
autoStart	boolean	true	docs:hooks.use-slide-down.options.autoStart
onComplete	() => void	-	docs:hooks.use-slide-down.options.onComplete
onStart	() => void	-	docs:hooks.use-slide-down.options.onStart
onStop	() => void	-	docs:hooks.use-slide-down.options.onStop
onReset	() => void	-	docs:hooks.use-slide-down.options.onReset

반환값

이름	타입	설명
ref	RefObject<T \| null>	docs:hooks.use-slide-down.returns.ref
style	CSSProperties	docs:hooks.use-slide-down.returns.style
isVisible	boolean	docs:hooks.use-slide-down.returns.isVisible
isAnimating	boolean	docs:hooks.use-slide-down.returns.isAnimating
progress	number	docs:hooks.use-slide-down.returns.progress
start	() => void	docs:hooks.use-slide-down.returns.start
stop	() => void	docs:hooks.use-slide-down.returns.stop
reset	() => void	docs:hooks.use-slide-down.returns.reset

사용 사례

드롭다운

드롭다운 메뉴 애니메이션

알림

알림 배지 및 팝업 애니메이션

확장 가능한 콘텐츠

콘텐츠 펼치기/접기 슬라이드

메뉴 항목

메뉴 항목 캐스케이드 등장

useSlideRight useScaleIn