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