Skip to content
Capgo - Capacitor 앱에 대한 실시간 업데이트 Capgo

@capgo/capacitor-transitions

Capacitor 앱에 native-feeling 경로 전환 및 iOS edge swipe-back를 추가하여 Ionic UI를 채택하지 않고도.
시작하기 GitHub

Ionic-style 동작

__CAPGO_KEEP_0__ 및 Android 경로 애니메이션을 사용하여 모바일 네비게이션 패턴을 모델링하는 iOS와 Android 경로 애니메이션을 사용하여 Ionic 컴포넌트를 배달하지 않고.

스와이프 뒤로

Capacitor iOS에서만 내부에서만 finger를 따라하는 iOS edge 제스처를 활성화하고.

프레임워크에 독립적

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

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

라이브러리가 전환层를 조율하는 동안, TOOLBAR, CONTENT, FOOTER, ROUTER를 직접 가져와 사용하세요.

사용할 때

Ionic의 컴포넌트 시스템을 채택하지 않고도 Ionic의 품질과 같은 페이지 동작을 원하는 앱을위한 섹션입니다.

@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 route 전환을 플랫폼의 규약에 가까운 느낌으로 사용할 때

  • 동기화된 헤더, 콘텐츠, 푸터 동작
  • 빠른 백 네비게이션을위한 페이지 캐싱
  • 사용자의 손가락에 따라서 iOS의 에지 스와이프 백 동작을 선택적으로 사용할 때
  • 프레임워크에 대한 설정 도우미를 사용할 수 있습니다. 하지만 프레임워크에 대한 라우터가 필요하지 않습니다.
  • __CAPGO_KEEP_0__

데모

데모 섹션
Capacitor 스타일 셸에서 앞으로와 뒤로의 네비게이션을 보여주는 애니메이션 React 페이지 전환 데모
React 전환 흐름

API

API가 애니메이션 루트 스택을 소유하고 있습니다.
  • <cap-router-outlet> 각 페이지를 감싸고 있습니다.
  • <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 __CAPGO_KEEP_0__/__CAPGO_KEEP_1__을 강제로 적용하거나 false __CAPGO_KEEP_0__/__CAPGO_KEEP_1__을 비활성화합니다.

이 제스처는 웹层에서 구현되며, 포인터 위치에서 애니메이션 진행을 구동하여 거리와 속도에 따라 완료하거나 취소하는 방식으로 Ionic의 iOS 스와이프 백 전환을 느낄 수 있도록 설계되었습니다.

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

@capgo/capacitor-transitions 제목입니다.

__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions을 사용 중이라면 capgo/capacitor-transitions __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions을 사용하여 capgo/capacitor-transitions의 네이티브 기능을 사용하는 경우 capgo/capacitor-live-activities를 사용하여 capgo/capacitor-live-activities의 네이티브 기능을 사용하는 경우, for the native capability in Using @capgo/capacitor-live-activities, @capgo/capacitor-live-activities implementation 세부 사항에 대한 @capgo/capacitor-live-activities Using @capgo/capacitor-video-player native 기능에 대한 @capgo/capacitor-video-player @capgo/capacitor-video-player implementation 세부 사항에 대한 @capgo/capacitor-video-player