@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内のみで自動的に有効にします。

フレームワーク非依存

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

UIのロックはありません。

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

使用するタイミング

@capgo/capacitor-transitions is for apps that want Ionic-quality page motion without adopting Ionic’s component system. It keeps navigation in your existing web router and animates page elements inside the Capacitor WebView.

使用するタイミング

次のような場合に使用します:
プラットフォームの慣習に近いpush、pop、rootルートのトランジション
ヘッダー、コンテンツ、フッターの動きを調整
高速バックナビゲーション用のページキャッシュ
iOSのエッジスワイプバックジェスチャーをオプションで使用できます。

デモ

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" 開発者が選択する

swipe-gesture="auto" uses Capacitor runtime helpers and enables the edge gesture only in native iOS Capacitor apps. Use true を強制するか false を無効にする。

ウェブ層で実装されたジェスチャーです。iOSのIonicのスワイプバックトランジションに似た動きを実現するように、指の位置からアニメーション進行を駆動し、距離と速度に基づいて終了またはキャンセルします。

「@capgo/capacitor-transitions」から続けてください。

Capgoを使用している場合 @capgo/capacitor-transitions @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions @capgo/capacitor-live-activities @capgo/capacitor-live-activities Using @capgo/capacitor-live-activities for the native capability in Using @capgo/capacitor-live-activities, @capgo/capacitor-live-activities for the implementation detail in @capgo/capacitor-live-activities, Using @capgo/capacitor-video-player for the native capability in Using @capgo/capacitor-video-player, and @capgo/capacitor-video-player for the implementation detail in @capgo/capacitor-video-player.