jQueryMobile-トランジション

これにより、指定された期間に発生するプロパティ値を変更し、状態ごとに異なるスタイルを適用することで、要素の動作をある状態から別の状態に変更できます。

次の表に、jQueryMobileフレームワークで使用されるページ遷移の一部を示します。

シニア番号	移行と説明	ページの場合	ダイアログの場合
1	fade 要素をフェードインおよびフェードアウトさせることができます。	フェードページ	フェードダイアログ
2	flip 要素を後ろから前に、次のページにめくります。	ページをめくる	フリップダイアログ
3	pop ポップアップウィンドウを作成できます。	ポップページ	ポップダイアログ
4	flow 現在のページを遠ざけて次のページを表示します。	フローページ	フローダイアログ
5	slide ページを右から左にスライドできます。	スライドページ	スライドダイアログ
6	slidefade ページを右から左にスライドし、次のページでフェードインします。	スライドフェードページ	スライドフェードダイアログ
7	slideup ページを下から上にスライドします。	スライドアップページ	スライドアップダイアログ
8	slidedown ページを上から下にスライドします。	スライドダウンページ	スライドダウンダイアログ
9	turn 次のページに進むことができます。	ページをめくる	ダイアログを回す
10	none この属性を使用して遷移効果を使用することはできません。	なしページ	なしダイアログ

移行とグローバル構成の設定

デフォルトでは、ページには fadeフレームワークの移行。を追加することにより、カスタムトランジションを使用できますdata-transitionリンクへの属性。を使用して、ページにさまざまなデフォルトの遷移効果を使用できます。defaultPageTransitionグローバルにオプション。ダイアログの場合、次を利用できますdefaultDialogTransition オプション。

フォールバック遷移

フェードトランジションを除くすべてのトランジションは3D変換をサポートします。3D変換をサポートしていないデバイスは、フェードトランジションを使用する必要があります。一部のブラウザは、各遷移タイプの3D変換をサポートしていないため、fade デフォルトの遷移フォールバックとして。

トランジションの最大スクロール

ページとの間でスクロールする場合、トランジションはnoneに設定され、スクロール位置はデバイス画面の高さの3倍になります。ナビゲーション要素をクリックすると、応答が遅くなったり、ブラウザがクラッシュしたりすることがあります。したがって、これを回避するために、次を使用して遷移にスクロール位置を使用しています。getMaxScrollForTransition 関数。

トランジションの最大幅

ウィンドウ幅がピクセル幅よりも大きい場合は、遷移を無効にできます。を使用して、トランジションの最大幅を構成できます。$.mobile.maxTransitionWidthデフォルトでfalseに設定されているグローバルオプション。ピクセル幅やfalse値などの値を取り、ウィンドウが指定された値よりも大きいときにfalse値でない場合、遷移はnoneに設定されます。

同じページの移行

を使用して、現在のページにトランジションを追加できます。 allowSamePageTransition ページコンテナウィジェットのオプション change() 方法。

カスタムトランジションの作成

を使用して、ページにカスタムトランジションを作成できます。 $.mobile.transitionHandlers Webサイトまたはアプリケーションでのトランジションの選択を拡張するオプション。