@capgo/capacitor-transitions

Ionicスタイルの動き

__CAPGO_KEEP_0__とAndroidルートアニメーションを使用して、モバイルナビゲーションパターンに基づいてモデリングします。Ionicコンポーネントを配信せずに。

スワイプバック

Capacitor iOSで、ネイティブCapacitor iOSのみで、指を追うiOSエッジジェスチャーを有効にし、自動的に有効にすることができます。

フレームワーク非依存

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

UIのロックインなし

自作ツールバー、コンテンツ、フッター、ルーターを持ち、ライブラリはトランジション層の調整を担当します。

When To Use It

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

使用する場合

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

注意

このパッケージは、ネイティブの UIKit または Android ナビゲーションチームをレンダリングしません。ネイティブのナビゲーションバー、タブバー、ネイティブのトランジションシェルを使用するには @capgo/native-navigation.

デモ

Reactトランジションフロー

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

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を継続してください

If you are using @capgo/capacitor to plan native media and interface behavior, connect it with @capgo/capacitorを使用して native capability in @capgo/capacitorを使用 @capgo/capacitor-live-activities native capability in @capgo/capacitor-live-activitiesを使用 @capgo/capacitor-live-activities 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.