Ionic-style 동작
__CAPGO_KEEP_0__ 앱에서 iOS 및 Android 경로 애니메이션을 사용할 수 있습니다. 이 애니메이션은 모바일 네비게이션 패턴을 모델링합니다. Ionic 컴포넌트를 배포하지 않고도 사용할 수 있습니다.
스와이프 백
Capacitor iOS에서만 스와이프 백을 사용할 수 있습니다. 사용자가 스와이프 백을 사용할 수 있도록 자동으로 활성화할 수 있습니다.
프레임워크에 독립적입니다
웹 컴포넌트를 직접 사용하거나 React, Vue, Angular, Svelte, Solid를 위한 도우미를 사용할 수 있습니다.
UI에 대한 종속성이 없습니다
자신의 툴바, 콘텐츠, 푸터, 라우터를 가져오고 라이브러리는 전환层를 조정합니다.
@capgo/capacitor-transitions 이것은 Ionic의 컴포넌트 시스템을 채택하지 않고도 Ionic의 품질과 같은 페이지 동작을 원하는 앱을위한 것입니다. Capacitor WebView 내부의 페이지 요소만 애니메이션합니다.
다음과 같은 경우에 사용하세요:
- push, pop, root route 전환의 플랫폼 규약에 가까운 느낌
- 헤더, 콘텐츠, 푸터의 동기화된 동작
- 빠른 백 네비게이션을위한 페이지 캐싱
- iOS에서 사용자의 손가락을 따라하는 옵션 Edge Swipe-Back 동작
- 프레임워크에 특정한 라우터가 없이는 프레임워크에 특정한 설정 도우미
API의 핵심
제목이 ‘API의 핵심’인 섹션<cap-router-outlet>__CAPGO_KEEP_0__가 애니메이션된 경로 스택을 소유합니다.<cap-page>각 페이지를 wrapping합니다.<cap-header>,<cap-content>, 그리고<cap-footer>이동할 영역을 식별합니다.initTransitions(options?)__CAPGO_KEEP_0__ 프레임워크 바인딩을 초기화합니다.setDirection('forward' | 'back' | 'root' | 'none')다음 라우터 업데이트에 애니메이션을 실행할 것을 알려줍니다.setupRouterOutlet(element, options?)아웃렛을 라이프사이클 및 제스처 동작과 연결합니다.setupPage(element, callbacks?)페이지 라이프사이클 콜백을 등록합니다.
플랫폼 모델
플랫폼 모델 섹션platform="auto" __CAPGO_KEEP_0__ 런타임 헬퍼를 사용하고 네이티브 iOS __CAPGO_KEEP_1__ 앱에서 에지 제스처만 활성화합니다. 에지 제스처를 강제로 사용하거나 끄려면 platform="ios" 또는 platform="android" 테스트 중일 때.
swipe-gesture="auto" Capacitor를 사용하여 강제로 사용하거나 Capacitor를 사용하여 끕니다. true 웹层에서 구현된 제스처는 Ionic의 iOS 스와이프 백 전환과 같은 느낌을 주기 위해 포인터 위치에서 애니메이션 진행률을 제어하고 거리와 속도에 따라 완료하거나 취소합니다. false 편집 페이지
iOS 또는 Android 애니메이션 프로파일을 런타임 환경에서 선택합니다. 테스트 중일 때는 강제로