Ionic 스타일 모션
Ionic 컴포넌트를 배포하지 않고 모바일 내비게이션 패턴을 본뜬 iOS 및 Android 라우트 애니메이션을 사용하세요.
스와이프 백
손가락을 따라가는 iOS edge gesture를 활성화하며, native Capacitor iOS 내에서만 자동 활성화할 수 있습니다.
프레임워크에 구애받지 않음
Web components를 직접 사용하거나 React, Vue, Angular, Svelte, Solid용 헬퍼를 사용할 수 있습니다.
UI lock-in 없음
라이브러리가 transition 레이어를 조율하는 동안, 기존의 toolbar, content, footer, router를 그대로 사용할 수 있습니다.
언제 사용하나요?
“언제 사용하나요?” 섹션@capgo/capacitor-transitions Ionic의 컴포넌트 시스템을 도입하지 않고도 Ionic 수준의 페이지 모션을 구현하려는 앱에 적합합니다. 기존 웹 router에서 네비게이션을 유지하고 Capacitor WebView 내부 페이지 요소에 애니메이션을 적용합니다.
다음과 같은 경우에 사용하세요:
- 플랫폼 컨벤션에 가까운 push, pop, root route transition이 필요한 경우
- header, content, footer가 조화롭게 움직이는 모션이 필요한 경우
- 빠른 뒤로 가기 네비게이션을 위한 page caching이 필요한 경우
- 사용자의 손가락을 따라가는 선택적 iOS 엣지 스와이프 백 제스처
- 프레임워크 전용 라우터 없이 프레임워크별 설정 헬퍼 제공
데모
“데모” 섹션
핵심 API
“Core API” 섹션<cap-router-outlet>애니메이션 라우트 스택을 관리합니다.<cap-page>각 페이지를 감쌉니다.<cap-header>,<cap-content>, 그리고<cap-footer>함께 움직여야 할 영역을 식별합니다.initTransitions(options?)프레임워크 바인딩을 초기화합니다.setDirection('forward' | 'back' | 'root' | 'none')다음 라우터 업데이트 시 실행할 애니메이션을 지정합니다.setupRouterOutlet(element, options?)outlet을 라이프사이클 및 제스처 동작에 연결합니다.setupPage(element, callbacks?)페이지 라이프사이클 콜백을 등록합니다.
플랫폼 모델
“플랫폼 모델” 섹션platform="auto" 런타임 환경에서 iOS 또는 Android 애니메이션 프로필을 선택합니다. 강제로 설정할 수 있습니다 platform="ios" 또는 platform="android" 테스트할 때.
swipe-gesture="auto" Capacitor 런타임 헬퍼를 사용하며, 네이티브 iOS Capacitor 앱에서만 엣지 제스처를 활성화합니다. 사용하세요 true 강제로 켜거나 false 비활성화하려면.
이 제스처는 웹 레이어에서 구현됩니다. 포인터 위치에 따라 애니메이션 진행률을 제어하고, 거리와 속도에 따라 완료하거나 취소해 Ionic의 iOS swipe-back 전환처럼 느껴지도록 설계되었습니다.
@capgo/capacitor-transitions에서 계속하기
“@capgo/capacitor-transitions에서 계속하기” 섹션사용 중이라면 @capgo/capacitor-transitions 네이티브 미디어 및 인터페이스 동작을 계획하려면, 이를 다음 항목과 연결하세요: @capgo/capacitor-transitions 사용하기 @capgo/capacitor-transitions 사용하기의 네이티브 기능을 위해, @capgo/capacitor-live-activities 사용 @capgo/capacitor-live-activities 사용에서의 네이티브 기능, @capgo/capacitor-live-activities @capgo/capacitor-live-activities의 구현 세부 사항, @capgo/capacitor-video-player 사용 @capgo/capacitor-video-player 사용에서의 네이티브 기능 및 @capgo/capacitor-video-player @capgo/capacitor-video-player.의 구현 세부 사항
