@capgo/capacitor-transitions

Add native-feeling route transitions and optional iOS edge swipe-back to Capacitor apps without adopting Ionic UI.

시작하기 GitHub

아이오닉 스타일의 동작

iOS와 Android 경로 애니메이션을 사용하여 모바일 네비게이션 패턴을 모델링할 수 있습니다. 이 기능은 아이오닉 컴포넌트를 배포하지 않고도 사용할 수 있습니다.

스와이프 뒤로

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

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

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

UI에 대한 종속성이 없습니다.

라이브러리가 전환层을 조정하는 동안 TOOLBAR, CONTENT, FOOTER, ROUTER를 포함하여 사용자 정의 TOOLBAR, CONTENT, FOOTER를 사용할 수 있습니다.

사용할 때

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

다음과 같은 경우에 사용하세요:

push, pop, root route 전환을 플랫폼 규약에 가까운 느낌으로 사용하세요.
헤더, 콘텐츠, 푸터의 동시적인 움직임
빠른 백 네비게이션을 위한 페이지 캐싱
사용자가 손가락을 따라하는 iOS 에지 스와이프 백 제스처를 선택적으로 사용하세요.
프레임워크에 대한 설정 도우미를 프레임워크에 대한 라우터 없이 사용하세요.

데모

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" Capacitor 런타임 헬퍼를 사용하고 네이티브 iOS Capacitor 앱에서 에지 제스처만 활성화합니다. true 이 기능을 강제로 사용하거나 false 이 기능을 비활성화합니다.

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

Keep going from @capgo/capacitor-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 for the implementation detail in @capgo/capacitor-live-activities, Using @capgo/capacitor-video-player for the native capability in Using @capgo/capacitor-video-player, and @capgo/capacitor-video-player for the implementation detail in @capgo/capacitor-video-player.