시작하기

1. 패키지를 설치하세요

   npm install @capgo/capacitor-transitions

2. __CAPGO_KEEP_0__ 앱의 웹层에서 작동하는 이 패키지에는 원시 동기화 단계가 없습니다.

   import '@capgo/capacitor-transitions';

3. 라우팅된 페이지를.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>

4. 라우터가 경로를 변경하기 전에 방향을 설정

   import { setDirection } from '@capgo/capacitor-transitions/react';
   
   setDirection('forward');
   router.push('/message/42');
   
   setDirection('back');
   router.back();

주의

There is no native sync step for this package. It runs in the web layer of your Capacitor app.

클립보드에 복사

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}>
      {/* Your router renders cap-page children here. */}
    </cap-router-outlet>
  );
}

export function InboxPage() {
  const navigate = useNavigate();
  const pageRef = useRef<HTMLElement>(null);

  useEffect(() => {
    if (!pageRef.current) return;

    return setupPage(pageRef.current, {
      onDidEnter: () => console.log('Inbox visible'),
    });
  }, []);

  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>
  );
}

React JSX TypeScript

React 프로젝트에서 사용하는 @capgo/capacitor-transitions/react JSX 형식의 타입 정의를 포함하고 cap-router-outlet, cap-page, cap-header, cap-content, 및 cap-footer대부분의 React 프로젝트에서 이 import를 사용하면 TSX에서 사용할 수 있는 커스텀 엘리먼트가 자동으로 유효해집니다.

TypeScript가 여전히 Property 'cap-router-outlet' does not exist on type 'JSX.IntrinsicElements'오류를 보고한다면

src/capgo-transitions.d.ts

import '@capgo/capacitor-transitions/react';

Vite, Create React App, 및 대부분의 webpack React 앱의 경우, 그 파일을 넣으면 됩니다. src/ Next.js의 경우, src/ 또는 프로젝트 루트에 넣고 tsconfig.json 를 포함하도록 하세요:

{
  "include": ["src", "src/capgo-transitions.d.ts"]
}

사용자 정의 TypeScript 또는 webpack 설정이 별도의 types/ 폴더를 사용하는 경우, 그 폴더를 포함하세요:

{
  "include": ["src", "types"]
}

스와이프 백

클립보드에 복사

<cap-router-outlet swipe-gesture="auto"></cap-router-outlet>
<cap-router-outlet swipe-gesture="true"></cap-router-outlet>
<cap-router-outlet swipe-gesture="false"></cap-router-outlet>

또는 자바스크립트에서:

const outlet = document.querySelector('cap-router-outlet');

outlet?.setSwipeGesture('auto');
outlet?.setSwipeGesture(true);
outlet?.setSwipeGesture(false);

auto Capacitor이 네이티브 iOS 런타임을 보고할 때만 제스처를 활성화합니다. 제스처 중에 페이지 전환은 손가락에 따라 진행됩니다. 사용자가 손가락을 놓으면, 전환은 완료되고 브라우저 히스토리에게 뒤로가기를 요청하거나 취소되고 현재 페이지를 복원합니다.

제스처를 시작하지 않도록 요소를 유지하려면 data-swipe-gesture-ignore:

<button data-swipe-gesture-ignore>Open drawer</button>

네이티브 네비게이션

네이티브가 상단 및 하단 바를 소유하고 웹 콘텐츠가 아이오닉 스타일의 페이지 동작을 유지할 때 @capgo/capacitor-transitions 네이티브 네비게이션 패키지를 설치하고 동기화하세요: @capgo/native-navigation 터미널 창

1. Install and sync the native navigation package:

   npm install @capgo/native-navigation
   npx cap sync

2. __CAPGO_KEEP_1__:__CAPGO_KEEP_2__

   import { NativeNavigation } from '@capgo/native-navigation';
   
   await NativeNavigation.configure({
     contentInsetMode: 'css',
   });
   
   await NativeNavigation.setNavbar({
     title: 'Inbox',
     backButton: { visible: false },
   });

3. __CAPGO_KEEP_3__를 페이지만 관리하도록 유지하세요.

   <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);
   }

4. __CAPGO_KEEP_4__에서 두 시스템을 모두 제어하세요.

   import { NativeNavigation } from '@capgo/native-navigation';
   import { setDirection } from '@capgo/capacitor-transitions/react';
   import { router } from './router';
   
   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' },
     });
   }

__CAPGO_KEEP_5__를 다시 렌더링하지 마세요. 이동하는 <cap-header>__CAPGO_KEEP_6__를 유지하고 @capgo/native-navigation __CAPGO_KEEP_7__를 사용하세요. WebView 페이지 콘텐츠 아래에. @capgo/capacitor-transitions __CAPGO_KEEP_8__

Components

<cap-router-outlet>

속성	타입	기본값	설명
platform	'ios' | 'android' | 'auto'	'auto'	애니메이션 스타일
duration	number	플랫폼 기본	애니메이션 지속 시간 (밀리초)
keep-in-dom	boolean	true	__CAPGO_KEEP_0__
max-cached	number	10	DOM에 유지되는 최대 캐시 페이지
swipe-gesture	boolean | 'auto'	'auto'	iOS 에지 제스처를 활성화, 비활성화, 또는 네이티브 감지

메소드:

• push(element, config?)
• pop(config?)
• setRoot(element, config?)
• setSwipeGesture(true | false | 'auto')

<cap-page>

페이지 하나를 감싸고 라이프 사이클 이벤트를 내뱉습니다:

• cap-will-enter
• cap-did-enter
• cap-will-leave
• cap-did-leave

<cap-content>

속성	타입	기본값	설명
fullscreen	boolean	false	헤더 뒤에 콘텐츠가 스크롤되도록 하기
scroll-x	boolean	true	가로 스크롤을 활성화하기
scroll-y	boolean	true	세로 스크롤을 활성화하기

프레임워크 도우미

프레임워크 엔트리 포인트는 동일한 핵심 도우미를 노출합니다.

import { initTransitions, setDirection, setupPage, setupRouterOutlet } from '@capgo/capacitor-transitions/react';

initTransitions({ platform: 'auto' });
setDirection('forward');
setupRouterOutlet(element, { platform: 'auto', swipeGesture: 'auto' });
setupPage(element, { onWillEnter, onDidEnter, onWillLeave, onDidLeave });

사용 가능한 엔트리 포인트:

• @capgo/capacitor-transitions/react
• @capgo/capacitor-transitions/vue
• @capgo/capacitor-transitions/angular
• @capgo/capacitor-transitions/svelte
• @capgo/capacitor-transitions/solid

Getting Started에서 계속하기

Capgo를 사용하는 경우 Getting Started을 사용하여 계획 및 기업 운영을 위한 마이그레이션에 사용하고 @capgo/capacitor-transitions를 사용하여 @capgo/capacitor-transitions를 사용하는 native capability Capgo 기업용 Capgo 기업용에서 제품 워크플로우를 위해 아이오닉 기업용 플러그인 대체 아이오닉 기업용 플러그인 대체에서 제품 워크플로우를 위해 Capgo 대체 Capgo 대체에서 제품 워크플로우를 위해, 그리고 Capgo 컨설팅 Capgo 컨설팅에서 제품 워크플로우를 위해