@capgo/capacitor-transitions

iOSとAndroidのルートアニメーションを、モバイルナビゲーションパターンに基づいてモデル化したものを使用して、Ionicコンポーネントを含めずにCapacitorアプリにnative-feelingルートトランジションとiOSエッジスワイプバックを追加します。

始める GitHub

Ionicスタイルの動き

iOSとAndroidのルートアニメーションを、モバイルナビゲーションパターンに基づいてモデル化したものを使用して、Ionicコンポーネントを含めずに__CAPGO_KEEP_0__アプリにnative-feelingルートトランジションとiOSエッジスワイプバックを追加します。

スワイプバック

Capacitor iOSで、指を追従するiOSエッジジェスチャーを有効にし、自動的にnative Capacitor iOS内のみで有効にすることができます。

フレームワーク非依存

直接Webコンポーネントを使用するか、React、Vue、Angular、Svelte、Solidのヘルパーを使用して、__CAPGO_KEEP_0__アプリにiOSとAndroidのルートアニメーションを追加します。

UIのロックインなし

__CAPGO_KEEP_0__アプリにiOSとAndroidのルートアニメーションを追加するには、ツールバー、コンテンツ、フッター、ルーターを独自に作成し、ライブラリがトランジション層を調整します。

使用するタイミング

@capgo/capacitor-transitions 既存のWebルーター内でページ要素をアニメーション化し、Capacitor WebView内でナビゲーションを保持するため、Ionicのコンポーネントシステムを採用せずにIonicの質の高いページ動作を実現するためのアプリケーション向けです。

使用する必要がある場合

プラットフォームの慣習に近い感じのpush、pop、rootルートのトランジション
コーディネートされたヘッダー、コンテンツ、フッターの動作
高速バックナビゲーション用のページキャッシュ
iOSのエッジスワイプバックジェスチャーがユーザーの指を追跡するオプション
フレームワーク固有のセットアップヘルパーを使用することなくフレームワーク固有のルーター

デモ

API

<cap-router-outlet> __CAPGO_KEEP_0__はアニメーションルートスタックを所有します。
<cap-page> __CAPGO_KEEP_0__は各ページをwrapします。
<cap-header>, <cap-content>、 <cap-footer> 移動するべき領域を特定します。
initTransitions(options?) __CAPGO_KEEP_0__はフレームワークバインディングを初期化します。
setDirection('forward' | 'back' | 'root' | 'none') __CAPGO_KEEP_0__は次のルーターアップデートにアニメーションを実行するように指示します。
setupRouterOutlet(element, options?) ライフサイクルとジェスチャー動作を接続します。
setupPage(element, callbacks?) ページライフサイクルコールバックを登録します。

プラットフォームモデル

platform="auto" iOSまたはAndroidのアニメーションプロファイルをランタイム環境から選択します。テスト中は強制できます。 platform="ios" または platform="android" 「__CAPGO_KEEP_0__」ランタイムヘルパーを使用し、ネイティブiOS「__CAPGO_KEEP_1__」アプリでエッジジェスチャーを有効にします。強制する場合は「__CAPGO_KEEP_0__」を使用し、無効にする場合は「__CAPGO_KEEP_0__」を使用します。

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__-transitions」から続きます。 false iOSまたはAndroidのアニメーションプロファイルを選択します。

ネイティブiOSアプリでエッジジェスチャーを有効にします。

Keep going from @capgo/capacitor-transitions

あなたが使用している場合 @capgo/capacitor-transitions ネイティブメディアとインターフェイスの動作を計画するために使用している場合、CloudflareのCapacitorと接続してください @capgo/capacitor-transitions ネイティブ機能のCapacitorで使用する場合、@capgo/capacitor-transitions @capgo/capacitor-live-activities ネイティブ機能のCapacitorで使用する場合、@capgo/capacitor-live-activities @capgo/capacitor-live-activities @capgo/capacitor-live-activitiesの実装詳細 @capgo/capacitor-video-player ネイティブ機能のCapacitorで使用する場合、@capgo/capacitor-video-player、 @capgo/capacitor-video-player Capgoの@capgo/capacitor-video-playerの実装詳細について