ページ切替効果

jQuery Mobileでは、CSSによる6種類の切り替えエフェクトを用意しています。これは、オブジェクトの切り替えやページ遷移、戻るボタンによる動作などで用いることが出来ます。

切り替え効果を設定するには data-transition 属性をリンクに指定してください。利用可能な値は、次の通りです。

fade	dialog	page
pop	dialog	page
flip	dialog	page
turn	dialog	page
flow	dialog	page
slidefade	dialog	page
slide	dialog	page
slideup	dialog	page
slidedown	dialog	page
none	dialog	page

どのボタンを押してもフェードになる？ 総ての切り替え効果を見るには、3Dトランスフォームに対応したブラウザを使う必要があります。初期設定では、デバイスが3Dに対応していない(たとえばAndroid2系のような)場合、自動的に「フェード」が使われるようになります。この挙動は、設定により変更することが可能です(下記参照)。

これらの切り替え効果は jQtouch から、若干の変更を加えて流用されています。

切替効果の設定

デフォルトでのページの切替効果は、新たなページが右から左に出てくる slide 効果です。これを変更するには、リンクに data-transition 属性を指定します。

<a href="index.html" data-transition="pop">I'll pop</a>

ブラウザの「戻る」ボタンが押された場合、フレームワークは自動的に、そのページが表示された際の効果を逆回しに再現します。通常のリンクに対してこの逆回し効果を与えたい場合は data-direction=“reverse” 属性を指定します。この指定は、かつては *data-back=“true” でしたが、現在は既にサポートしていません。注意してください。

ページ切替のグローバル設定

デフォルトのページ切替効果を変更したい場合、グローバル設定の defaultPageTransition を指定します。ダイアログの表示効果については defaultDialogTransition により設定します。

ブラウザ対応とパフォーマンス

総ての切り替え効果は、CSSキーフレームアニメーションで作られています。そしてブラウザ対応のため、iOSやBlackberry、Android、Safari、Chrome用の -webkit ベンダープレフィックスと、Firefox用の -moz プレフィックス両方を含めています。このキーフレームアニメーションのサポート状況および動作の滑らかさは、ブラウザのバージョンやハードウェア性能との組み合わせで決まってきます。アニメーションがサポートされないブラウザ上では、切り替え効果は自動的にオフになります。予めパフォーマンスに問題のあることが分かっている環境のために、3Dサポートの無いブラウザ用の挙動と、切り替え効果を提供する画面の最大幅を決めることが可能になっています。

3D未サポート環境での効果

デフォルトで、フェードを除く全ての切り替え効果は3Dトランスフォームを必要とします。そのため、この3D機能をサポートしていないデバイスでは、指定に関係なくフェードが使われるようになります。また、この処理はサポートがされていてもパフォーマンスに問題があることが予め分かっている、Android2系のような端末でも同様に挙動するようにしています。

3Dサポートの無いブラウザ上で使われる効果はデフォルトで「フェード」ですが、この設定を変更することもできます。例えば次のように記述すれば、未対応ブラウザでは切り替え効果は「無し」になります。

$.mobile.transitionFallbacks.slideout = "none"

切り替え効果の最大幅設定

初期設定では、ウインドウの幅がデバイスのピクセル幅よりも大きい場合には効果が無効になる(“none”)ようになっています。画面が巨大になると切り替え効果のパフォーマンスが劣化する問題に対応するため、この設定は有用です。この設定は変更可能で、グローバル設定の $.mobile.maxTransitionWidth により指定します。デフォルトは false です。このオプションには横幅(ピクセル単位)もしくは false が指定可能です。ここに false 以外が指定された場合、ハンドラはウインドウの幅が指定された値を超えた場合に、切り替え効果「無し」を用いるようになります。

独自効果の作成

jQuery Mobileでは $.mobile.transitionHandlers ディクショナリに独自ページ切り替え効果を追加することができます。これによりサイトやアプリでの効果を拡張可能です。