@capgo/capacitor-transitions
@capgo/capacitor-transitions adds Ionic-style route transitions to Capacitor apps without adopting Ionic UI. It runs in the web layer, keeps your existing router, and can auto-enable an iOS edge swipe-back gesture only inside native Capacitor iOS.
설치
npm install @capgo/capacitor-transitions
There is no native sync step because the package does not add native plugin code.
요소 등록
import '@capgo/capacitor-transitions';
페이지 Wrap
<cap-router-outlet platform="auto" swipe-gesture="auto">
<cap-page>
<cap-header slot="header">
<h1>Inbox</h1>
</cap-header>
<cap-content slot="content">
<button>Open message</button>
</cap-content>
<cap-footer slot="footer">
<nav>Tabs</nav>
</cap-footer>
</cap-page>
</cap-router-outlet>
라우터에 연결
전환 방향을 설정하기 전에 일반 라우트 업데이트하기:
import { setDirection } from '@capgo/capacitor-transitions/react';
setDirection('forward');
router.push('/message/42');
setDirection('back');
router.back();
리액트 예제
import { useEffect, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import { initTransitions, setDirection, setupPage, setupRouterOutlet } from '@capgo/capacitor-transitions/react';
import '@capgo/capacitor-transitions';
initTransitions({ platform: 'auto' });
export function AppShell() {
const outletRef = useRef<HTMLElement>(null);
useEffect(() => {
if (!outletRef.current) return;
setupRouterOutlet(outletRef.current, { platform: 'auto', swipeGesture: 'auto' });
}, []);
return <cap-router-outlet ref={outletRef}>{/* routes */}</cap-router-outlet>;
}
export function InboxPage() {
const navigate = useNavigate();
const pageRef = useRef<HTMLElement>(null);
useEffect(() => {
if (!pageRef.current) return;
return setupPage(pageRef.current);
}, []);
return (
<cap-page ref={pageRef}>
<cap-header slot="header">
<h1>Inbox</h1>
</cap-header>
<cap-content slot="content">
<button
onClick={() => {
setDirection('forward');
navigate('/message/42');
}}
>
Open message
</button>
</cap-content>
</cap-page>
);
}
리액트 subpath는 JSX 타이핑을 포함하여 커스텀 요소를 포함합니다. TypeScript가 여전히 cap-router-outlet 이 요소가 존재하지 않습니다. JSX.IntrinsicElements라고 보고하는 경우, 다음 파일을 추가하세요:
// src/capgo-transitions.d.ts
import '@capgo/capacitor-transitions/react';
Vite, Create React App, 및 대부분의 webpack 리액트 앱의 경우, 그 파일을 src/ 하위 폴더에 두면 충분합니다. Next.js 또는 커스텀 TypeScript 설정의 경우, 포함이 보장되어야 합니다. tsconfig.json:
{
"include": ["src", "src/capgo-transitions.d.ts"]
}
스와이프 뒤로 활성화
사용 swipe-gesture="auto" Capacitor이 네이티브 iOS 런타임을 보고할 때만 제스처를 활성화하세요:
<cap-router-outlet swipe-gesture="auto"></cap-router-outlet>
또는 자바스크립트에서 강제로 활성화할 수 있습니다:
const outlet = document.querySelector('cap-router-outlet');
outlet?.setSwipeGesture(true);
outlet?.setSwipeGesture(false);
outlet?.setSwipeGesture('auto');
이동 중에 손가락을 따라가고 사용자가 손가락을 놓으면 완료되거나 취소됩니다. 버튼, 슬라이더 또는 드로어에 추가하여 에지 제스처를 시작하지 않도록 하세요. data-swipe-gesture-ignore 네이티브 네비게이션과 함께 사용
설치
Install @capgo/native-navigation 네이티브 크롬을 구성하고 WebView 페이지에 대한 전환을 유지하세요:
npm install @capgo/native-navigation
npx cap sync
animated page body와 native-navigation CSS 변수를 사용하여 insets:
import { NativeNavigation } from '@capgo/native-navigation';
import { setDirection } from '@capgo/capacitor-transitions/react';
import { router } from './router';
await NativeNavigation.configure({
contentInsetMode: 'css',
});
await NativeNavigation.setNavbar({
title: 'Inbox',
backButton: { visible: false },
});
await NativeNavigation.addListener('navbarBack', () => {
setDirection('back');
router.back();
});
async function openMessage(id: string) {
setDirection('forward');
router.push(`/message/${id}`);
await NativeNavigation.setNavbar({
title: 'Message',
backButton: { visible: true, title: 'Inbox' },
});
}
사용 cap-content __CAPGO_KEEP_0__은 iOS 네이티브 런타임을 보고할 때만 제스처를 활성화하세요.
<cap-router-outlet platform="auto" swipe-gesture="auto">
<cap-page>
<cap-content slot="content" fullscreen>
<main class="native-page">Inbox content</main>
</cap-content>
</cap-page>
</cap-router-outlet>
.native-page {
padding-top: var(--cap-native-navigation-top);
padding-bottom: var(--cap-native-navigation-bottom);
}
원본 네비게이션 바를 웹 헤더로 복제하지 마십시오. @capgo/native-navigation 바를 원본으로 유지합니다. @capgo/capacitor-transitions 바 아래쪽의 페이지 콘텐츠를 애니메이션합니다.
전체 참조
- GitHub: github.com/Cap-go/capacitor-transitions
- 문서: /docs/plugins/transitions/
Using @capgo/capacitor-transitions에서 계속하세요.
이미 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions를 사용하고 계신가요? @capgo/capacitor-transition Using @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions @capgo/capacitor-transitions와 연결하세요. for the implementation detail in @capgo/capacitor-transitions, 시작하기 Capacitor 전환에 대한 구현 세부 정보 @capgo/capacitor-라이브-활동 native 기능을 위한 @capgo/capacitor-live-활동 @capgo/capacitor-실시간 활동 @capgo/capacitor-live-활동 @capgo/capacitor-video-player Capacitor 전환 기능을 사용하는 @capgo/capacitor 비디오 플레이어에 대한 원시 기능을 위해.