Getting Started

이 플러그인을 설치하는 방법과 전체 마크다운 가이드를 포함한 설치 명령어를 복사합니다.

        Set up this Capacitor plugin in the project.

Use the package manager already used by the project.
Install these package(s): `@capgo/capacitor-transitions`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/transitions/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.

설치

AI-Assisted Setup을 사용하여 플러그인을 설치할 수 있습니다. AI 도구에 Capgo 기능을 추가하려면 다음 명령어를 사용하세요:

npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

그런 다음 다음 명령어를 사용하세요:

Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-transitions` plugin in my project.

만약 Manual Setup을 선호한다면, 다음 명령어를 실행하고 아래의 플랫폼별 지침을 따르세요:

패키지를 설치하세요

npm install @capgo/capacitor-transitions

웹 컴포넌트를 등록하세요
```
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}>
      {/* 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>
  );
}

리액트 JSX TypeScript

import @capgo/capacitor-transitions/react JSX를 위한 cap-router-outlet, cap-page, cap-header, cap-content, 그리고 cap-footer. React 프로젝트에서 대부분의 경우, 그 임포트는 TSX에서 자동으로 커스텀 엘리먼트를 유효하게 만듭니다.

TypeScript가 여전히 보고한다면 Property 'cap-router-outlet' does not exist on type 'JSX.IntrinsicElements'프로젝트 선언 파일을 추가하세요:

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"]
}

뒤로 스와이프

마크업에서 iOS 에지 제스처를 활성화/비활성화하는 방법:

<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>

또는 JavaScript에서:

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 Native @capgo/native-navigation 웹 콘텐츠가 Ionic 스타일의 페이지 동작을 유지하는 동안 Native가 상단 및 하단 바를 소유해야 할 때 사용합니다.

Native 네비게이션 패키지를 설치하고 동기화하세요:
터미널 창
```
npm install @capgo/native-navigation
npx cap sync
```

Native Chrome을 구성하세요:

import { NativeNavigation } from '@capgo/native-navigation';

await NativeNavigation.configure({
  contentInsetMode: 'css',
});

await NativeNavigation.setNavbar({
  title: 'Inbox',
  backButton: { visible: false },
});

페이지를 관리하는 웹 전환 출구만 책임지세요:

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

같은 라우터 이벤트에서 두 시스템을 제어하세요:

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

자연스러운 네이티브 상단 바를 다시 움직이는 <cap-header>로 렌더링하지 마십시오. @capgo/native-navigation Let @capgo/capacitor-transitions 바를 네이티브로 유지하고 WebView 페이지 콘텐츠 아래에

컴포넌트

`<cap-router-outlet>`

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

메서드:

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

`<cap-page>`

<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를 사용하여 @capgo/capacitor-transitions Capgo의 @capgo/capacitor-transitions Capgo Enterprise for the product workflow in Capgo Enterprise, Ionic Enterprise Plugin 대체 Ionic Enterprise Plugin 대체의 제품 워크플로우 Capgo Alternatives for the product workflow in Capgo Alternatives, and Capgo Consulting Capgo 제품 워크플로우에 대한 Capgo 컨설팅을 위한.