아이오닉 스타일의 동작
iOS 및 Android 라우트 애니메이션을 모바일 네비게이션 패턴에 따라 모델링하여 아이오닉 컴포넌트를 배포하지 않고 사용하세요.
스와이프 백
iOS 에지 제스처를 활성화하여 finger를 따라가고, 네이티브 Capacitor iOS 내부에서만 자동으로 활성화하세요.
프레임워크에 독립적입니다.
웹 컴포넌트를 직접 사용하거나 React, Vue, Angular, Svelte, Solid를 위한 도우미를 사용하세요.
UI에 대한 종속성이 없습니다.
toolbar, content, footer, 및 라우터를 포함하여 라이브러리가 전환层를 조정하는 동안 자신의 툴바, 콘텐츠, 푸터를 가져오세요.
사용하는 경우
이 기능을 사용할 때@capgo/capacitor-transitions 이 앱은 Ionic의 컴포넌트 시스템을 채택하지 않고도 Ionic의 품질과 같은 페이지 이동을 원하는 앱에 적합합니다. Capacitor WebView 내부의 페이지 요소만 애니메이션을 적용하고, 기존 웹 라우터 내의 네비게이션을 유지합니다.
다음과 같은 경우 사용하세요:
- 플랫폼 규약에 가까운 push, pop, root route 전환
- 헤더, 콘텐츠, 푸터의 동시적인 움직임
- 빠른 백 네비게이션을 위한 페이지 캐싱
- iOS에서 사용자의 손가락에 따라 따라가는 옵션 Edge Swipe-Back 제스처
- 프레임워크에 특화된 라우터 없이 프레임워크에 특화된 설정 도우미
데모
데모 섹션
API
API 섹션<cap-router-outlet>__CAPGO_KEEP_0__가 애니메이션된 루트 스택을 소유하고 있습니다.<cap-page>__CAPGO_KEEP_0__는 각 페이지를 감싸고 있습니다.<cap-header>,<cap-content>그리고<cap-footer>__CAPGO_KEEP_0__는 함께 움직일 수 있는 영역을 식별합니다.initTransitions(options?)__CAPGO_KEEP_0__는 프레임워크 바인딩을 초기화합니다.setDirection('forward' | 'back' | 'root' | 'none')__CAPGO_KEEP_0__는 다음 라우터 업데이트에 애니메이션을 실행할 것을 알려줍니다.setupRouterOutlet(element, options?)outlet을 lifecycle과 gesture 행동에 연결합니다.setupPage(element, callbacks?)페이지 lifecycle 콜백을 등록합니다.
플랫폼 모델
플랫폼 모델platform="auto" iOS 또는 Android 애니메이션 프로파일을 런타임 환경에서 선택합니다. 테스트 중일 때는 강제로 platform="ios" or platform="android" Cloudflare의 __CAPGO_KEEP_0__ 런타임 헬퍼를 사용하고 native iOS __CAPGO_KEEP_1__ 앱에서만 에지 제스처를 활성화합니다. 강제로 활성화하거나
swipe-gesture="auto" uses Capacitor runtime helpers and enables the edge gesture only in native iOS Capacitor apps. Use true 활성화/비활성화 false 웹层에서 제스처를 구현했습니다. Ionic의 iOS swipe-back 전환과 같은 느낌을 주기 위해 pointer 위치에서 애니메이션 진행을 제어하고, 거리와 속도에 따라 완료하거나 취소합니다.
Capacitor의 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions에서 계속 진행하세요.
Keep going from @capgo/capacitor-transitions
“capgo/capacitor-transitions”를 통해 계속 진행하세요.”__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions을 사용하고 있다면 capgo/capacitor-transitions __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-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 for the implementation detail in @capgo/capacitor-video-player.