PageTransition

@hua-labs/ui/advanced

v1.1.0

Pro

베타

Pro 플랜 컴포넌트

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

웨이팅리스트 등록

Advanced page transition animations with multiple types including fade, slide, scale, flip, morph, cube, and zoom. Includes customizable easing and duration.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { PageTransition } from "@hua-labs/ui/advanced";

고급/Pro 컴포넌트는 @hua-labs/ui/advanced에서 제공됩니다.

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

Pro 컴포넌트입니다. Pro 라이선스가 필요합니다.

라이브 데모

인터랙티브 데모

Select a transition type and click replay

Pro

FADE

Page transition effect

이징 옵션

Different easing functions

smooth

bounce

elastic

ease-out

편의 컴포넌트

Pre-configured transition components

FadePageTransition

SlidePageTransition

ScalePageTransition

FlipPageTransition

Props

이름	타입	기본값	설명
`children*`	`React.ReactNode`	-	Content to animate
`type`	`"fade" \| "slide" \| "slide-up" \| "slide-down" \| "slide-left" \| "slide-right" \| "scale" \| "flip" \| "morph" \| "cube" \| "zoom"`	`"fade"`	Transition type
`duration`	`number`	`500`	Duration in milliseconds
`easing`	`"linear" \| "ease-in" \| "ease-out" \| "ease-in-out" \| "bounce" \| "elastic" \| "smooth"`	`"smooth"`	Easing function
`delay`	`number`	`0`	Delay before animation starts (ms)
`autoStart`	`boolean`	`true`	Auto-start animation on mount
`showProgress`	`boolean`	`false`	Show progress indicator
`onStart`	`() => void`	-	Callback when animation starts
`onComplete`	`() => void`	-	Callback when animation completes
`variant`	`"fade" \| "slide" \| "scale" \| "flip"`	`"fade"`	Simple transition variant
`loadingVariant`	`"default" \| "dots" \| "bars" \| "ring" \| "ripple"`	`"default"`	Loading indicator style
`loadingText`	`string`	-	Loading text message
`showLoading`	`boolean`	`false`	Show loading indicator

코드 예시

docs:common.basicUsagetsx

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

<AdvancedPageTransition type="fade" duration={500}>
  <div>Your page content</div>
</AdvancedPageTransition>

docs:components.pageTransition.examples.slideUptsx

<AdvancedPageTransition
  type="slide-up"
  duration={600}
  easing="smooth"
>
  <section className="p-8">
    <h1>Welcome</h1>
    <p>Content slides up into view</p>
  </section>
</AdvancedPageTransition>

docs:components.pageTransition.examples.conveniencetsx

import {
  FadePageTransition,
  SlidePageTransition,
  ScalePageTransition,
  FlipPageTransition,
} from '@hua-labs/ui/advanced';

// Convenience components
<FadePageTransition duration={400}>
  <Content />
</FadePageTransition>

<SlidePageTransition duration={500} easing="bounce">
  <Content />
</SlidePageTransition>

docs:components.pageTransition.examples.withProgresstsx

<AdvancedPageTransition
  type="scale"
  duration={800}
  showProgress
  onComplete={() => console.log('Done!')}
>
  <div>Loading content...</div>
</AdvancedPageTransition>

접근성

•모션 감소: prefers-reduced-motion 사용자 설정을 존중합니다
•콘텐츠 접근성: 애니메이션 중과 이후에도 콘텐츠에 항상 접근할 수 있습니다

TextRevealPro CarouselPro