usePageTransitionManager

@hua-labs/ui/advanced

Pro

Pro 플랜 컴포넌트

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

웨이팅리스트 등록

설치

bash

npm install @hua-labs/hua

Import

tsx

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

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

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

기본 사용법

tsx

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

const [state, controls] = usePageTransitionManager({
  defaultType: 'fade',
  defaultDuration: 300,
  enableHistory: true,
});

// Start a tracked transition (returns unique ID)
const id = await controls.startTransition({ type: 'slide-left' });

// Cancel, pause, resume
controls.cancelTransition(id);
controls.pauseAll();
controls.resumeAll();

// Access history and stats
console.log(state.transitionHistory);
const stats = controls.getTransitionStats();

API 레퍼런스

옵션

이름	타입	기본값	설명
defaultType	TransitionType	-	docs:hooks.use-page-transition-manager.options.defaultType
defaultDuration	number	-	docs:hooks.use-page-transition-manager.options.defaultDuration
defaultEasing	TransitionEasing	-	docs:hooks.use-page-transition-manager.options.defaultEasing
enableHistory	boolean	true	docs:hooks.use-page-transition-manager.options.enableHistory
enableDebug	boolean	false	docs:hooks.use-page-transition-manager.options.enableDebug

반환값

이름	타입	설명
state.isTransitioning	boolean	docs:hooks.use-page-transition-manager.returns.isTransitioning
state.currentTransition	PageTransitionEvent \| null	docs:hooks.use-page-transition-manager.returns.currentTransition
state.transitionHistory	PageTransitionEvent[]	docs:hooks.use-page-transition-manager.returns.transitionHistory
controls.startTransition	(config: Partial<TransitionConfig>) => Promise<string>	docs:hooks.use-page-transition-manager.returns.startTransition
controls.cancelTransition	(id: string) => void	docs:hooks.use-page-transition-manager.returns.cancelTransition
controls.pauseAll	() => void	docs:hooks.use-page-transition-manager.returns.pauseAll
controls.resumeAll	() => void	docs:hooks.use-page-transition-manager.returns.resumeAll
controls.clearHistory	() => void	docs:hooks.use-page-transition-manager.returns.clearHistory
controls.getTransitionStats	() => TransitionStats	docs:hooks.use-page-transition-manager.returns.getTransitionStats

사용 사례

usePageTransitionPro useInView