@capgo/capacitor-transitions

Capacitor 앱에 네이티브한 느낌의 경로 전환 및 iOS 에지 스와이프 백 옵션을 추가합니다.

시작하기 GitHub

__CAPGO_KEEP_0__ 모션

iOS 및 Android 경로 애니메이션을 모바일 네비게이션 패턴에 따라 모델링하는 방법입니다. Ionic 컴포넌트를 배송하지 않고.

__CAPGO_KEEP_0__

iOS 에지 제스처를 활성화하여 finger를 따라가고, native Capacitor iOS 내부에서만 자동으로 활성화할 수 있습니다.

프레임워크에 독립적입니다.

웹 컴포넌트를 직접 사용하거나 React, Vue, Angular, Svelte, Solid를 위한 도우미를 사용할 수 있습니다.

UI에 대한 결합을 피합니다.

toolbar, content, footer, router를 포함하여 자신의 UI를 가져오고, 라이브러리는 전환层를 조정합니다.

사용하는 경우

@capgo/capacitor-transitions 이 섹션은 Ionic의 컴포넌트 시스템을 채택하지 않고도 Ionic의 페이지 모션의 품질을 원하는 앱에 적합합니다. existing web router에서 네비게이션을 유지하고, Capacitor WebView 내부의 페이지 요소를 애니메이션화합니다.

이 기능을 사용할 때 필요합니다:

push, pop, 및 root route 전환을 플랫폼 규약에 가까운 느낌으로 사용합니다.
헤더, 콘텐츠 및 푸터의 동시적인 움직임
빠른 뒤로가기 위해 페이지 캐싱
iOS 에지 스와이프-백 제스처를 사용할 수 있습니다. 사용자의 손가락을 따라합니다.
프레임워크에 종속되지 않는 프레임워크별 설정 도우미를 사용합니다.

데모

API의 핵심

<cap-router-outlet> animated route stack을 소유합니다.
<cap-page> 각 페이지를 wrapping합니다.
<cap-header>, <cap-content>그리고 <cap-footer> 이동할 영역을 식별합니다.
initTransitions(options?) framework 바인딩을 초기화합니다.
setDirection('forward' | 'back' | 'root' | 'none') 다음 라우터 업데이트에 애니메이션을 실행할 것을 알려줍니다.
setupRouterOutlet(element, options?) outlet을 lifecycle 및 제스처 동작과 연결합니다.
setupPage(element, callbacks?) 페이지 lifecycle 콜백을 등록합니다.

플랫폼 모델

platform="auto" __CAPGO_KEEP_0__ 런타임 환경에서 iOS 또는 Android 애니메이션 프로파일을 선택합니다. 테스트 중일 때는 강제로 __CAPGO_KEEP_0__를 선택할 수 있습니다. platform="ios" 또는 platform="android" 테스트 중일 때는 강제로 __CAPGO_KEEP_0__를 선택할 수 있습니다.

swipe-gesture="auto" Capacitor 런타임 헬퍼를 사용하고 네이티브 iOS Capacitor 앱에서 에지 제스처만 활성화합니다. Capacitor를 강제로 활성화하거나 Capacitor를 비활성화하려면 사용하세요. true __CAPGO_KEEP_0__를 강제로 활성화하거나 __CAPGO_KEEP_0__를 비활성화하려면 사용하세요. false 이 제스처는 웹层에서 구현되어 Ionic의 iOS 스와이프-백 전환을 느낄 수 있도록 애니메이션 진행을 포인터 위치에서 구동하고 거리와 속도에 따라 완료하거나 취소합니다.

Keep going from @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions

Keep going from @capgo/capacitor-transitions 섹션

If you are using @capgo/capacitor-transitions native 미디어와 인터페이스 동작을 계획하기 위해 연결하세요. Using @capgo/capacitor-transitions @capgo/capacitor-transitions의 native 기능을 위해. Using @capgo/capacitor-live-activities @capgo/capacitor-live-activities의 native 기능을 위해. @capgo/capacitor-live-activities @capgo/capacitor-live-activities의 구현 세부 정보를 위해. Using @capgo/capacitor-video-player @capgo/capacitor-video-player의 native 기능을 위해. @capgo/capacitor-video-player @capgo/capacitor-video-player의 구현 세부 정보를 위해.