@capgo/capacitor-transition

@Capacitor/__CAPGO_KEEP_1__-transitions

시작하기 GitHub

아이오닉 스타일의 동작

iOS 및 Android 경로 애니메이션을 모바일 네비게이션 패턴에 따라 모델링하는 데 사용할 수 있습니다. Ionic 컴포넌트를 배송하지 않습니다.

스와이프 뒤로

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

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

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

No UI lock-in

사용자 인터페이스에 대한 종속성을 피하세요

사용 방법

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

사용할 때

다음과 같은 기능이 필요할 때 사용하세요:
push, pop, root route 전환을 플랫폼 규약에 가까운 느낌으로
헤더, 콘텐츠, 푸터의 동기화된 움직임
빠른 백 네비게이션을 위한 페이지 캐싱
iOS에서 사용자의 손가락에 따라 따라가는 선택적 Edge Swipe-Back 동작

데모

API

<cap-router-outlet> __CAPGO_KEEP_0__은 애니메이션 루트 스택을 소유합니다.
<cap-page> __CAPGO_KEEP_0__은 각 페이지를 감싸고 있습니다.
<cap-header>, <cap-content>, <cap-footer> 이동할 영역을 식별하세요.
initTransitions(options?) 프레임워크 바인딩을 초기화합니다.
setDirection('forward' | 'back' | 'root' | 'none') 다음 라우터 업데이트에 애니메이션을 실행할 애니메이션을 알려줍니다.
setupRouterOutlet(element, options?) 아웃렛을 라이프 사이클 및 제스처 동작과 연결합니다.
setupPage(element, callbacks?) 페이지 라이프 사이클 콜백을 등록합니다.

플랫폼 모델

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

swipe-gesture="auto" Edge 제스처를 사용하기 위해 Capacitor 런타임 헬퍼를 사용하고 네이티브 iOS Capacitor 앱에서만 활성화합니다. true 강제로 사용하거나 false 이를 비활성화하려면.

이 제스처는 웹层에서 구현되었습니다. 거리와 속도에 따라 완료되거나 취소되도록 pointer 위치에서 애니메이션 진행을 제어하여 iOS의 Ionic 스와이프 백 전환을 느낄 수 있도록 설계되었습니다.

capgo에서 capacitor-transitions로 계속 진행하세요.

이러한 기능을 사용 중이라면 @capgo/capacitor-transition @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions @capgo/capacitor-transitions @capgo/capacitor-live-activities @capgo/capacitor-live-activities @capgo/capacitor-live-activities @capgo/capacitor-실시간 활동 capgo/capacitor-실시간 활동 Using @capgo/capacitor-video-player for native 기능을 사용하는 @capgo/capacitor-video-player 에서 @capgo/capacitor-video-player @capgo/capacitor-video-player