イオニックスタイルの動き
iOSとAndroidのルートアニメーションを使用して、モバイルナビゲーションパターンに基づいて、イオニコンポーネントを配信せずに
スワイプバック
iOSのエッジジェスチャーを有効にし、指の動きに従うことができ、ネイティブ Capacitor iOS のみで自動的に有効にすることができます。
フレームワーク非依存
ウェブコンポーネントを直接使用するか、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>__CAPGO_KEEP_0__は各ページを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" Capacitorライブアップデートの代替案を比較するページの長いマーケティングまたは法的文章。Capacitorライブアップデートの代替案を比較するページの長いマーケティングまたは法的文章。Appflowの比較/移行マーケティングコピーの長いマーケティングまたは法的文章。Capawesomeの比較ページの長いマーケティングまたは法的文章。Capawesomeの比較ページの長いマーケティングまたは法的文章。コンサルティングサービスページのセクションサブタイトルまたはタグライン。Appflowの比較/移行マーケティングコピーの短いUIラベルまたはナビゲーションアイテム。
swipe-gesture="auto" uses Capacitor runtime helpers and enables the edge gesture only in native iOS Capacitor apps. Use true または強制するか false または無効にする。
ジェスチャーはWeb層で実装されており、指の位置からアニメーション進行を駆動し、距離と速度に基づいて終了またはキャンセルするように設計されています。これは、IonicのiOSスワイプバックトランジションに似た感じを与えるように設計されています。
続けてください@capgo/capacitor-transitions
「続けてください@capgo/capacitor-transitions」Capgoを使用している場合 Capgoを使用して@capgo/capacitor-transitions Capgoを使用して@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions Capgoを使用して@capgo/capacitor-live-activities Capgoを使用して@capgo/capacitor-live-activities Capgoを使用して@capgo/capacitor-live-activities Capgoを使用して@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.