usePageTransition

@hua-labs/ui/advanced

Pro

Pro 플랜 컴포넌트

곧 출시됩니다! 웨이팅리스트에 등록하고 소식을 받아보세요.

웨이팅리스트 등록

설치

bash

npm install @hua-labs/hua

Import

tsx

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

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

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

기본 사용법

tsx

import { usePageTransition } from '@hua-labs/ui/advanced';

const [state, controls] = usePageTransition({
  type: 'fade',
  duration: 300,
  easing: 'ease-in-out',
});

// Start transition
await controls.start();

// Or start with override config
await controls.start({ type: 'slide-up', duration: 500 });

// Reverse, pause, resume, reset
await controls.reverse();
controls.pause();
controls.resume();
controls.reset();

API 레퍼런스

옵션

이름	타입	기본값	설명
initialConfig	Partial<TransitionConfig>	-	docs:hooks.use-page-transition.options.initialConfig

반환값

이름	타입	설명
state.isTransitioning	boolean	docs:hooks.use-page-transition.returns.isTransitioning
state.isVisible	boolean	docs:hooks.use-page-transition.returns.isVisible
state.progress	number	docs:hooks.use-page-transition.returns.progress
controls.start	(config?: Partial<TransitionConfig>) => Promise<void>	docs:hooks.use-page-transition.returns.start
controls.reverse	() => Promise<void>	docs:hooks.use-page-transition.returns.reverse
controls.pause	() => void	docs:hooks.use-page-transition.returns.pause
controls.resume	() => void	docs:hooks.use-page-transition.returns.resume
controls.reset	() => void	docs:hooks.use-page-transition.returns.reset

사용 사례

페이지 전환

부드러운 페이지 간 전환 효과

useSmartMotion usePageTransitionManagerPro