Skip to content
Capgo - Live Updates for Capacitor Apps Capgo

@capgo/capacitor-transitions

Capacitor 앱에 네이티브한 경로 전환 및 iOS 에지 스와이프 백을 추가하여 이오닉 UI 를 채택하지 않고도 Capacitor 앱을 만듭니다.
시작하기 GitHub

아이오닉 스타일의 동작

iOS와 안드로이드 경로 애니메이션을 모바일 네비게이션 패턴에 따라 모델링하여 아이오닉 컴포넌트를 배포하지 않고 사용하세요.

스와이프 백

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

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

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

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

라이브러리가 전환层을 조율하는 동안, TOOLBAR, CONTENT, FOOTER, ROUTER를 포함하여, 당신이 원하는대로 TOOLBAR, CONTENT, FOOTER, ROUTER를 가져올 수 있습니다.

사용할 때

“사용할 때”라는 제목을 가진 섹션

@capgo/capacitor-transitions 이것은 Ionic의 컴포넌트 시스템을 채택하지 않고도 Ionic의 페이지 이동 품질과 같은 앱에 적합한 것입니다. existing web router에서 네비게이션을 유지하고, Capacitor WebView 내부의 페이지 요소를 애니메이션합니다.

다음을 사용할 때:

  • iOS 플랫폼의 규약에 가까운 push, pop, root route 전환을 필요로 할 때
  • 헤더, 콘텐츠, 푸터의 동기화된 움직임
  • 빠른 백 네비게이션을 위한 페이지 캐싱
  • 사용자가 손가락을 따라하는 iOS 에지 스와이프-백 제스처를 선택적으로 사용할 수 있습니다.
  • 프레임워크에 특정한 설정 도우미를 사용할 수 있습니다. 하지만 프레임워크에 특정한 라우터를 사용하지 않습니다.

데모

제목 ‘데모’
Animated React page transition demo showing forward and back navigation in a Capacitor-style shell
React 전환 흐름

API

제목 ‘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

Keep going from @capgo/capacitor-transitions

이것을 사용하는 경우 Keep going from @capgo/capacitor-transitions native 미디어 및 인터페이스 동작을 계획하기 위해 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions을 연결하세요. native 기능을 사용하기 위해 @capgo/capacitor-transitions을 사용하세요. native 기능을 사용하기 위해 @capgo/capacitor-live-activities를 사용하세요. native 기능을 사용하기 위해 @capgo/capacitor-live-activities를 사용하세요. native 기능을 사용하기 위해 @capgo/capacitor-live-activities를 사용하세요. Capgo capgo/capacitor-live-activities Capgo capgo/capacitor-live-activities 구현 세부 사항 Capgo capgo/capacitor-video-player 사용 Capgo capgo/capacitor-video-player 사용하는 원생 기능 Capgo capgo/capacitor-video-player Capgo capgo/capacitor-video-player 구현 세부 사항