はじめに

インストール

CapgoのAIアシストセットアップを使用してプラグインをインストールできます。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.

If you prefer Manual Setup, install the plugin by running the following commands and follow the platform-specific instructions below:

1. Install the package

   npm install @capgo/capacitor-transitions

2. Register the web components

   import '@capgo/capacitor-transitions';

3. Copy to clipboard

   <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. Copy to clipboard

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

Note

このパッケージには、ネイティブの同期ステップが存在しません。Capacitor アプリのウェブ層で実行されます。

React セットアップ

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

インポート @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'を報告している場合、プロジェクト宣言ファイルを追加してください。

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

スワイプバック

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 enables the gesture only when Capacitor reports a native iOS runtime. During the gesture, the page transition follows the finger. When the user releases, the transition either completes and asks the browser history to go back, or cancels and restores the current page.

ジェスチャーを開始しないようにするには、 data-swipe-gesture-ignore:

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

ネイティブナビゲーション

使用 @capgo/capacitor-transitions with @capgo/native-navigation ネイティブが上部と下部のバーを所有し、ウェブコンテンツがイオニックスタイルのページモーションを維持する場合に使用します。

1. Install and sync the native navigation package:

   npm install @capgo/native-navigation
   npx cap sync

2. Configure native chrome:

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

3. Keep the web transition outlet responsible for pages only:

   <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. Drive both systems from the same router events:

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

Do not render the native top bar again as a moving <cap-header>. Let @capgo/native-navigation native UI を保持し、 @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エッジジェスチャーを有効、無効、またはネイティブ検出する

メソッド:

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

<cap-page>

1つのページをラップし、ライフサイクルイベントを発行する:

• 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を使用して Capgo Enterprise Capgo Enterprise Ionic Enterprise Plugin Alternatives Ionic Enterprise Plugin Alternatives Capgo Alternatives Capgo Alternatives Capgo Consulting Capgo Consulting