@capgo/capacitor-transitions

Add native-feeling route transitions and optional iOS edge swipe-back to Capacitor apps without adopting Ionic UI.

スタート GitHub

イオニックスタイルの動き

iOSとAndroidのルートアニメーションをモデリングしたモバイルナビゲーションパターンを使用することができます。

スワイプバック

Enable an iOS edge gesture that follows the finger and can auto-enable only inside native Capacitor iOS.

フレームワーク非依存

直接Webコンポーネントを使用するか、React、Vue、Angular、Svelte、Solidのヘルパーを使用してください。

UIのロックインなし

__CAPGO_KEEP_0__内のページ要素をアニメーションするために、ライブラリはトランジションレイヤーを管理します。

使用するとき

@capgo/capacitor-transitions Capgoは、既存のWebルーターでナビゲーションを維持し、Capacitor WebView内でページ要素をアニメーションすることで、Ionicのコンポーネントシステムを採用せずにIonicの質の高いページ動作を実現するアプリ向けです。

使用するときは次の場合にご利用ください

push、pop、rootルートのトランジションがプラットフォームの慣習に近い感覚
ヘッダー、コンテンツ、フッターの動きを調整
ページキャッシュによる高速バックナビゲーション
iOSのエッジスワイプバックジェスチャー（ユーザーの指が追跡する）をオプションで使用
フレームワーク固有のセットアップヘルパーをフレームワーク固有のルーターなしで使用

デモ

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" __CAPGO_KEEP_0__ ランタイムヘルパーを使用し、ネイティブiOS __CAPGO_KEEP_1__ アプリではエッジジェスチャーを有効にします。強制するにはを使用してください、または無効にするにはを使用してください。

swipe-gesture="auto" uses Capacitor runtime helpers and enables the edge gesture only in native iOS Capacitor apps. Use true Section titled “Platform Model” false choose the iOS or Android animation profile from the runtime environment. You can force it on or off when testing. uses __CAPGO_KEEP_0__ runtime helpers and enables the edge gesture only in native iOS __CAPGO_KEEP_1__ apps. Use to force it on or to disable it.

The gesture is implemented in the web layer. It is designed to feel like Ionic’s iOS swipe-back transition by driving animation progress from the pointer position, then finishing or cancelling based on distance and velocity.

@capgo/capacitorを継続してください

@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__を継続してください @capgo/capacitorを使用している場合 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__を使用して @capgo/capacitorを使用して@capgo/capacitorを使用してください @capgo/capacitorを使用して@capgo/capacitorを使用してください @capgo/capacitorを使用してください @capgo/capacitorを使用してください @capgo/capacitorを使用してください @capgo/capacitorを使用してください @capgo/capacitor-video-player @capgo/capacitor-video-playerのネイティブ機能を使用する @capgo/capacitor-video-player @capgo/capacitor-video-playerの実装詳細を使用する