@capgo/capacitor-transitions

Capgo 앱에 원활한 경로 전환 및 iOS 에지 스와이프 백을 추가하여 Ionic UI 를 채택하지 않고도 Capacitor 앱을 만드세요.

시작하기 GitHub

아이오닉 스타일의 동작

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

스와이프 뒤로

iOS의 Edge 제스처를 사용하여 손가락을 따라가고, 원격으로만 네이티브 Capacitor iOS 내부에서만 자동으로 활성화할 수 있습니다.

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

직접 웹 컴포넌트를 사용하거나 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 에지 스와이프 백 가젯이 사용자의 손가락을 따라하는 옵션
프레임워크에 특정한 라우터가 없는 프레임워크에 특정한 설정 도우미
주의

데모

API의 핵심

<cap-router-outlet> 애니메이션 루트 스택을 소유합니다.
<cap-page> 페이지를 wrapping합니다.
<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 __CAPGO_KEEP_0__

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_KEEP_1__-transitions을 사용하는 경우 capgo-transitions을 사용하여 네이티브 미디어 및 인터페이스 동작을 계획하고, 그것을 capacitor-transitions과 연결하세요. __CAPGO_KEEP_0__-transitions을 사용하여 네이티브 기능을 __CAPGO_KEEP_1__-transitions에서 사용하세요. capgo-transitions을 사용하여 네이티브 기능을 capacitor-live-activities에서 사용하세요. capgo-live-activities를 사용하여 네이티브 기능을 capacitor-live-activities에서 사용하세요. capgo-live-activities를 사용하여 capacitor-live-activities의 구현 세부 사항을 확인하세요. capgo-live-activities를 사용하여 capacitor-live-activities의 구현 세부 사항을 확인하세요. capgo-live-activities를 사용하여 capacitor-live-activities의 구현 세부 사항을 확인하세요. capgo-live-activities를 사용하여 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.