コンテンツに進む
Capgo - Capacitorアプリケーションをビルド、配信、更新 Capgo

@capgo/capacitor-トランジション

Capacitorのルート遷移とiOSのエッジスワイプバックをオプションで追加して、Ionic UIを採用せずにCapacitorアプリにnative-feelingルート遷移を実現します。
始めましょう GitHub

イオニック スタイルの動き

iOS と Android のルート アニメーションを使用して、モバイル ナビゲーション パターンに基づいて、イオニック コンポーネントを配信せずにナビゲーションを実装します。

スワイプ バック

iOS エッジ ゲストを有効にし、フィンガーを追跡し、ネイティブ Capacitor iOS のみで自動的に有効にすることができます。

フレームワーク非依存

直接 Web コンポーネントを使用するか、React、Vue、Angular、Svelte、Solid のヘルパーを使用して、トランジションを実装します。

UI のロックインなし

ツールバー、コンテンツ、フッター、ルーターを自作しながら、ライブラリがトランジション層を調整します。

使用するタイミング

「使用するタイミング」セクション

@capgo/capacitor-transitions イオニックのコンポーネント システムを採用せずに、イオニックの質の高いページの動きを実装したいアプリ向けです。既存の Web ルーターでナビゲーションを実装し、トランジションを Capacitor WebView 内のページ要素に適用します。

使用する必要がある場合に:

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

セクション「デモ」

Note: This package does not render native UIKit or Android navigation chrome. For native navbars, tabbars, and native transition shells, use @__CAPGO_KEEP_0__/native-navigation.
アニメーション付きのReactページ遷移デモは、前方と後方のナビゲーションを表示するCapacitorスタイルのシェル内で実行されます。
React遷移フロー

Core API

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

プラットフォームモデル

「プラットフォームモデル」

platform="auto" iOS または Android のアニメーションプロファイルを実行環境から選択します。テスト中は強制 platform="ios" または platform="android" iOS または Android のアニメーションプロファイルを実行環境から選択します。テスト中は強制します。

swipe-gesture="auto" Capacitor ランタイム ヘルパーを使用し、ネイティブ iOS Capacitor アプリでエッジ ゲストを有効にします。強制するには true を使用します。強制しない場合は false を使用します。

このジェスチャーは、ウェブ層で実装されています。ウェブ層でアニメーションを進め、指の位置から距離と速度に基づいて完了またはキャンセルします。

続きます。@capgo/capacitor-transitions

「続きます。@capgo/capacitor-transitions」

Capacitor の __CAPGO_KEEP_0__ ランタイム ヘルパーを使用し、ネイティブ iOS __CAPGO_KEEP_1__ アプリでエッジ ゲストを有効にします。強制するには @capgo/capacitor-トランジション ネイティブメディアとインターフェイスの動作を計画するには、__CAPGO_KEEP_1__-transitionsに接続します。 @capgo/capacitor-トランジションを使用 Capgoのネイティブ機能である@capgo/capacitor-transitionsの使用 @capgo/capacitor-ライブアクティビティ native capability in Using @capgo/capacitor-live-activities, @capgo/capacitor-ライブアクティビティ @capgo/capacitorライブアクティビティの実装詳細のために @capgo/capacitor-ビデオプレーヤー for the native capability in capgo/capacitor-video-player, and @capgo/capacitor-ビデオプレーヤー @capgo/capacitor-ビデオ・プレーヤーの実装詳細のために。