@capgo/capacitor-transitions

Capacitor 앱에 native-feeling 경로 전환 및 iOS edge swipe-back를 추가하여 Ionic UI를 채택하지 않고도 Capacitor 앱을 만들 수 있습니다.

시작하기 GitHub

아이오닉 스타일의 운동

iOS와 Android 경로 애니메이션을 모바일 네비게이션 패턴에 따라 모델링하는 방법으로 iOS와 Android 경로 애니메이션을 사용하세요.

스와이프 뒤로

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

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

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

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

자체 툴바, 콘텐츠, 푸터, 라우터를 가져오고 라이브러리는 전환层를 조율합니다.

When To Use It

@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.

플랫폼 규약에 가까운 push, pop, root 라우트 전환

헤더, 콘텐츠, 푸터의 동시적인 움직임
빠른 백 네비게이션을 위한 페이지 캐싱
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" __CAPGO_KEEP_0__ 런타임 헬퍼를 사용하고 네이티브 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 uses __CAPGO_KEEP_0__ runtime helpers and enables the edge gesture only in native iOS __CAPGO_KEEP_1__ apps. Use

The gesture is implemented in the web layer. It is designed to feel like Ionic’s iOS swipe-back transition by driving animation progress from the pointer position, then finishing or cancelling based on distance and velocity.

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

__CAPGO_KEEP_0__를 사용하는 경우 capgo/capacitor-transitions __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions와 연결하세요. capgo/capacitor-transitions를 사용하여 capgo/capacitor-transitions의 네이티브 기능을 연결하세요. capgo/capacitor-live-activities를 사용하여 capgo/capacitor-live-activities의 네이티브 기능을 연결하세요. capgo/capacitor-live-activities를 사용하여 capgo/capacitor-live-activities의 구현 세부 사항을 연결하세요. 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의 구현 세부 사항을 위해