Ionic スタイルのモーション
Ionic コンポーネントを含めずに、モバイルのナビゲーションパターンに倣った iOS/Android のルートアニメーションを利用できます。
スワイプで戻る
指に追従するiOSのエッジジェスチャを有効にします。ネイティブのCapacitor iOS内でのみ自動的に有効化することもできます。
フレームワークに依存しない
Web Componentsを直接使うか、React、Vue、Angular、Svelte、Solid向けのヘルパーを利用できます。
UIのロックインなし
ライブラリがトランジションのレイヤーを制御するので、ツールバー、コンテンツ、フッター、ルーターはご自身のものを使用できます。
利用シーン
「利用シーン」というタイトルのセクション@capgo/capacitor-transitions Ionicのコンポーネントシステムを採用せずに、Ionic品質のページモーションを実現したいアプリ向けです。既存のWebルーターでのナビゲーションを維持したまま、Capacitor WebView内のページ要素をアニメーション化します。
以下のような場合に最適です：
- プラットフォーム標準の動きに近いpush、pop、ルート遷移
- ヘッダー、コンテンツ、フッターが連動するモーション
- 素早い戻る操作を実現するページキャッシュ
- ユーザーの指に追従する、オプションのiOSエッジスワイプバックジェスチャ
- フレームワーク固有のルーターなしで使える、フレームワーク別のセットアップヘルパー
コア API
「Core API」セクション<cap-router-outlet>アニメーション付きのルートスタックを管理します。<cap-page>各ページをラップします。<cap-header>,<cap-content>や<cap-footer>一括して動かすべき領域を特定します。initTransitions(options?)フレームワークのバインディングを初期化します。setDirection('forward' | 'back' | 'root' | 'none')次のルーターの更新時に実行するアニメーションを指定します。setupRouterOutlet(element, options?)outletをライフサイクルおよびジェスチャー動作に接続します。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/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-video-playerの使用方法 @capgo/capacitor-video-player を使用する際のネイティブ機能については、 @capgo/capacitor-video-player @capgo/capacitor-video-player. の実装の詳細については
