iOSとAndroidのルートアニメーションを使用して、モバイルナビゲーションパターンに基づいてモバイルナビゲーションをモデル化することができます。
スワイプバック
iOSのエッジジェスチャーを有効にすると、指がフォローや、CapgoのiOSアプリ内で自動的に有効になります。
Enable an iOS edge gesture that follows the finger and can auto-enable only inside native Capacitor iOS.
framework_agnostic
ウェブコンポーネントを直接使用するか、React、Vue、Angular、Svelte、Solidのヘルパーを使用します。
UIのロックインを防ぐ
ツールバー、コンテンツ、フッター、ルーターを自作しながら、ライブラリがトランジションレイヤーを調整します。
使用するとき
「使用するとき」のセクション@capgo/capacitor-transitions Ionicのコンポーネントシステムを採用せずに、Ionicの質の高いページの動きを実現したいアプリ向けです。既存のウェブルーターでナビゲーションを維持し、Capacitor WebView内でページ要素をアニメーションします。
使用するときは
- プラットフォームの慣習に近いpush、pop、rootルートのトランジション
- 調整されたヘッダー、コンテンツ、フッターの動き
- 高速バックナビゲーション用のページキャッシュ
- ユーザーの指の動きに従うオプションのiOSエッジスワイプバックジェスチャー
- フレームワーク固有のセットアップヘルパーを使用することなく、フレームワーク固有のルーターを使用しない
API
セクション「API」<cap-router-outlet>__CAPGO_KEEP_0__はアニメーションルートスタックを所有し、各ページを包み込んでいます。<cap-page>owns the animated route stack. wraps each page.<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" Capacitor ランタイム ヘルパーを使用し、ネイティブ iOS Capacitor アプリではエッジジェスチャーを有効にします。 true を強制するかどうかを選択する false を無効にする
ジェスチャーはWeb層で実装されています。iOSのIonicのスワイプバックトランジションに似た感覚を与えるように、指の位置からアニメーション進度をドライブし、距離と速度に基づいて完了またはキャンセルします。
@capgo/capacitor-transitionsから続けてください
@capgo/capacitor-transitionsから続けてください@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitionsを使用している場合 @capgo/capacitor-transitions @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitionsを使用して、ネイティブメディアとインターフェイスの動作を計画し、@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitionsを@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitionsに接続します。 @capgo/capacitor-transitionsを使用して、@capgo/capacitor-transitionsのネイティブ機能を使用します。@capgo/capacitor-transitionsを使用して、@capgo/capacitor-transitionsを使用します。 @capgo/capacitor-live-activitiesを使用して、@capgo/capacitor-live-activitiesのネイティブ機能を使用します。@capgo/capacitor-live-activitiesを使用して、@capgo/capacitor-live-activitiesを使用します。 @capgo/capacitor-live-activitiesを使用して、@capgo/capacitor-live-activitiesを使用します。@capgo/capacitor-live-activitiesを使用して、@capgo/capacitor-live-activitiesを使用します。 @capgo/capacitor-live-activitiesを使用して、@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 Using @capgo/capacitor-video-player のネイティブ機能については、 @capgo/capacitor-video-player 実装詳細については @capgo/capacitor-video-player を参照してください。