Ionicスタイルの動き
__CAPGO_KEEP_0__アプリに、iOSとAndroidのルートアニメーションを使用する。モバイルナビゲーションパターンに基づいて実装する。
スワイプバック
Capacitor iOSで、指を追跡するiOSのエッジジェスチャーを有効にする。自動的に、ネイティブのCapacitor iOS内で有効にする。
フレームワーク非依存
直接Webコンポーネントを使用するか、React、Vue、Angular、Svelte、Solidのヘルパーを使用して、直接Webコンポーネントを使用する。
UIのロックインなし
ツールバー、コンテンツ、フッター、ルーターを自分で持ってくる。ライブラリはトランジション層を調整する。
使用するとき
「使用するとき」のセクション@capgo/capacitor-transitions Capacitorのコンポーネントシステムを採用せずに、Ionicの質の高いページの動きを実現したいアプリ向けです。Capacitor WebView内でページ要素をアニメーション化し、既存のWebルーター内でナビゲーションを維持します。
使用するときは
- プラットフォームの慣習に近いpush、pop、rootルートのトランジションが必要
- ヘッダー、コンテンツ、フッターの動きを調整
- 高速バックナビゲーション用のページキャッシュ
- iOSのエッジスワイプバックジェスチャーがユーザーの指を追従するオプション
- フレームワーク固有のセットアップヘルパーを使用するが、フレームワーク固有のルーターを使用しない
Core API
セクションのタイトルは「Core API」<cap-router-outlet>__CAPGO_KEEP_0__がアニメーションルートスタックを所有します。<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" Capacitor ランタイム ヘルパーを使用し、ネイティブ iOS Capacitor アプリでエッジ ゲストを有効にします。強制するには true を使用して強制するか false を使用して無効にします。
このジェスチャーは、ポインターの位置からアニメーション プログレスをドライブし、距離と速度に基づいて完了またはキャンセルすることで、Ionic の iOS スワイプ バック トランジションを模倣したように設計されています。