jQuery Mobile トランジション

jQuery Mobileは、ページを開く方法を選択できるCSS効果を含んでいます。

jQuery Mobileトランジション効果

jQuery Mobileは、一つのページから次のページへのトランジション効果に対応する一連の効果を持っています。

注釈：トランジション効果を実現するには、ブラウザがCSS3 3Dトランジションをサポートする必要があります：

ブラウザのサポート

  • Internet Explorer 10は3Dトランジションをサポートしています（以前のバージョンはサポートしていません）。
  • Operaは3Dトランジションをまだサポートしていません。

トランジション効果は任意のリンクやdata-transition属性を使用したフォームの送信に適用できます：

<a href="#anylink" data-transition="slide">ページ2にスライド

以下のテーブルは、data-transition属性と一緒に使用できる利用可能なトランジションを示しています：

トランジション 説明 テスト
フェード デフォルト。次のページにフェードイン/アウトします。 テスト
フリップ 後ろから前にページをめくるように次のページに移動します。 テスト
フロー 現在のページを飛び出して次のページを表示します。 テスト
ポップ ポップアップウィンドウのように次のページに移動します。 テスト
スライド 右から左にスライドして次のページに移動します。 テスト
スライドフェード 右から左にスライドして次のページにフェードインします。 テスト
スライドアップ 下から上にスライドして次のページに移動します。 テスト
スライドダウン 上から下にスライドして次のページに移動します。 テスト
移動 次のページに移動します。 テスト
なし トランジション効果がありません。 テスト

ヒント：jQuery Mobile では、フェードイン/アウト効果はすべてのリンクにデフォルトで設定されています（ブラウザがサポートしている場合）。

ヒント：上記のすべての効果はリバースアクションもサポートしており、例えば、ページが右から左にスライドするようにしたい場合、"reverse" 値を持つ data-direction 属性を使用してください。戻るボタンではデフォルトです。

例

<a href="#pagetwo" data-transition="slide" data-direction="reverse">スライド</a>

自分で試してみる