Skip to content
Capgo - Capacitor アプリケーション向けリアルタイム更新 Capgo

@capgo/capacitor-transitions

Add native-feeling route transitions and optional iOS edge swipe-back to Capacitor apps without adopting Ionic UI.
はじめに GitHub

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

iOSとAndroidルートアニメーションをモデリングしたモバイルナビゲーションパターンを使用する

スワイプバック

iOSのエッジジェスチャーを有効にし、指の動きを追跡し、ネイティブCapacitor iOS内で自動的に有効にする

フレームワーク非依存

React、Vue、Angular、Svelte、Solidのヘルパーを使用したり、直接Webコンポーネントを使用したり

UIのロックインなし

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

使用するタイミング

「使用するタイミング」

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

使用する場合

  • プラットフォームの慣習に近いpush、pop、rootルートのトランジション
  • 調整されたヘッダー、コンテンツ、フッターの動き
  • 高速バックナビゲーション用のページキャッシュ
  • iOSのエッジスワイプバックジェスチャーがユーザーの指を追うように実装される場合
  • フレームワーク固有のセットアップヘルパーがフレームワーク固有のルーターなしで利用できる

デモ

「デモ」というセクション
Capacitorスタイルのシェルで前方と後方のナビゲーションを示すアニメーションされた React ページトランジションのデモ
React トランジションフロー

APIのコア

「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" __CAPGO_KEEP_0__ ランタイムヘルパーを使用し、ネイティブiOS __CAPGO_KEEP_1__ アプリではエッジジェスチャーを有効にします。強制するには、を使用してください。無効にするには、を使用してください。

swipe-gesture="auto" uses Capacitor runtime helpers and enables the edge gesture only in native iOS Capacitor apps. Use true または false __CAPGO_KEEP_0__ ランタイムヘルパーを使用し、ネイティブiOS __CAPGO_KEEP_1__ アプリではエッジジェスチャーを有効にします。強制するには、を使用してください。無効にするには、を使用してください。

The gesture is implemented in the web layer. It is designed to feel like Ionic’s iOS swipe-back transition by driving animation progress from the pointer position, then finishing or cancelling based on distance and velocity.

続けて @capgo/capacitor-transitions

「続けて @capgo/capacitor-transitions」

Capgoを使用している場合 @capgo/capacitor-transitions @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitionsを使用して Capgoを使用して@capgo/capacitor-transitionsを使用して @capgo/capacitor-live-activities @capgo/capacitor-live-activitiesを使用して @capgo/capacitor-live-activities @capgo/capacitor-live-activitiesの実装詳細 @capgo/capacitor-live-activities Using @capgo/capacitor-video-player Capgoのネイティブ機能を使用するには、Capgoの@capgo/capacitor-video-playerを使用します。 @capgo/capacitor-video-player Capgoの実装詳細については、Capgoの@capgo/capacitor-video-playerを参照してください。