@capgo/capacitor-transitions

Capgo 앱에 네이티브한 경로 전환 및 iOS 에지 스와이프 백 기능을 추가하여 Ionic UI 를 채택하지 않고도 Capacitor 앱을 구축합니다.

시작하기 GitHub

아이오닉 스타일의 동작

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

스와이프 뒤로

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

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

웹 컴포넌트를 직접 사용하거나 React, Vue, Angular, Svelte, Solid의 도우미를 사용하세요.

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

라이브러리가 전환层를 조율하는 동안, TOOLBAR, CONTENT, FOOTER, ROUTER를 자체로 가져오세요.

사용할 때

@capgo/capacitor-transitions is for apps that want Ionic-quality page motion without adopting Ionic’s component system. It keeps navigation in your existing web router and animates page elements inside the Capacitor WebView.

iOS 플랫폼의 규약에 가까운 push, pop, root route 전환

헤더, 콘텐츠, 푸터의 동기화된 동작
빠른 백 네비게이션을 위한 페이지 캐싱
사용자의 손가락을 따라하는 iOS의 에지 스와이프-백 동작
프레임워크에 대한 설정 도우미를 사용할 수 있습니다. 그러나 프레임워크에 대한 라우터가 필요하지 않습니다.
__CAPGO_KEEP_0__ WebView 내부의 페이지 요소에 애니메이션을 적용합니다.

데모

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 이것을 비활성화합니다.

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

Keep going from @capgo/capacitor-transitions

이것을 사용하는 경우 @capgo/capacitor-transitions @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions을 연결하세요. Using @capgo/capacitor-transitions Using @capgo/capacitor-transitions Using @capgo/capacitor-live-activities Using @capgo/capacitor-live-activities @capgo/capacitor-live-activities 구현 세부 사항에 대한 @capgo/capacitor-live-activities Capgo @capgo/capacitor-video-player 사용 Capgo @capgo/capacitor-video-player 사용을 위한 네이티브 기능 @capgo/capacitor-video-player 구현 세부 사항에 대한 @capgo/capacitor-video-player