@capgo/capacitor-transitions

Capacitorアプリにナチュラルなルート遷移とiOSエッジスワイプバックを追加する

スタート GitHub

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

iOS と Android のルートアニメーションを使用して、モバイルナビゲーションパターンに基づいてモバイルアプリケーションを実装することができます。

スワイプバック

iOS のエッジジェスチャーを有効にすると、指の動きを追従し、ネイティブ Capacitor iOS のみで自動的に有効になります。

フレームワーク非依存

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

UIのロックインなし

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

使用するタイミング

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

使用するタイミング

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

デモ

Core API

<cap-router-outlet> __CAPGO_KEEP_0__ はアニメーションルートスタックを所有しています。
<cap-page> __CAPGO_KEEP_0__ は各ページをラップしています。
<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" Capacitorライブアップデートの代替案を比較するページ。ロール：長いマーケティングまたは法的文章。見つける場所：ページalternatives.astro。Capgo製品/ブランドと開発者用語を完全に保持します。

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

ウェブ層で実装されており、指の位置からアニメーション進度を操作し、距離と速度に基づいて完了またはキャンセルするように設計されています。これは、iOSのスワイプバックトランジションに似た感じを与えるように設計されています。

続けてください @capgo/capacitor-transitions

Capgoを使用している場合 @capgo/capacitor-transitions @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitionsを使用してネイティブメディアとインターフェイスの動作を計画する場合、@capgo/capacitor-transitionsを接続してください @capgo/capacitor-transitionsを使用してネイティブ機能の@capgo/capacitor-transitions @capgo/capacitor-live-activitiesを使用して @capgo/capacitor-live-activities の実装詳細については @capgo/capacitor-live-activities に関する詳細を参照してください。 Capgoの@capgo/capacitor-video-playerを使用します。 Capgoのnative capabilityを使用するには、Capgoの@capgo/capacitor-video-playerを使用します。 @capgo/capacitor-video-player の実装詳細については @capgo/capacitor-video-player に関する詳細を参照してください。