ページ切替効果

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

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

slide slideup slidedown pop fade flip

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

切替効果の設定

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

I'll pop

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

iOSで更にスムーズにページ切り替えを行うためには touchOverflow の使用を検討してください。

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

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

独自効果の作成 (CSSベース)

独自のページ切替効果をCSSベースで作成するには、効果名(たとえば “slide” など)と一致するクラスを用意します。そして次のように “in” と “out” のルールを定義してください。

.slide.in {
        -webkit-transform: translateX(0);
        -webkit-animation-name: slideinfromright;
}

.slide.out {
        -webkit-transform: translateX(-100%);
        -webkit-animation-name: slideouttoleft;
}

@-webkit-keyframes slideinfromright {
        from { -webkit-transform: translateX(100%); }
        to { -webkit-transform: translateX(0); }
}

@-webkit-keyframes slideouttoleft {
        from { -webkit-transform: translateX(0); }
        to { -webkit-transform: translateX(-100%); }
}

CSSベースの切替効果では、遷移元となるページと先のページ両方にクラスが適用されます。そして遷移元には “out” 、先には “in” のクラスも充てられます。それによって、ここでCSSにより定義したようなアニメーションが行われます。

独自効果に対して逆回転効果も定義するのであれば、同様に reverse クラスも用意する必要があります。

.slide.in.reverse {
        -webkit-transform: translateX(0);
        -webkit-animation-name: slideinfromleft;
}

.slide.out.reverse {
        -webkit-transform: translateX(100%);
        -webkit-animation-name: slideouttoright;
}

@-webkit-keyframes slideinfromleft {
        from { -webkit-transform: translateX(-100%); }
        to { -webkit-transform: translateX(0); }
}

@-webkit-keyframes slideouttoright {
        from { -webkit-transform: translateX(0); }
        to { -webkit-transform: translateX(100%); }
}

独自の効果がつくられれば、あとは data-transition 属性などを使ってリンクに指定します。

Page 2

クリックすると、スタイル定義した効果が発動されます。

アニメーションの easing や duration 定義は、jQuery Mobileでは次のように行われています。

.in, .out {
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-duration: 350ms;
}

これを変更したい場合、CSS3のルールに則って再定義してください。

独自効果の作成 (JSベース)

ユーザがリンクをクリックすると、jQuery Mobileはまず data-transition 属性が指定されていないかを確認します。ここで属性値として指定されたものが、ページ切り替えに使われる名前になります。属性が指定されていない場合、切替効果名はグローバル設定の $.mobile.defaultPageTransition (ページに対して)や $.mobile.defaultDialogTransition (ダイアログに対して)で指定されたものになります。

新たなページが読み込まれると、切替効果名で $.mobile.transitionHandlers に登録されたハンドラを用いてアニメーションが実行されます。ここでハンドラが見つかれば、そのハンドラが切替効果に用いられ、見つからなかった場合は $.mobile.defaultTransitionHandler が用いられます。

初期状態では、この $.mobile.transitionHandlers には “none” というハンドラが設定されているだけの状態です。このハンドラは単純に、遷移元のページから “ui-page-active” クラスを除去して、遷移先のページに付与するだけのものです。切り替えは即座に行われ、何のアニメーション効果もありません。

そして $.defaultTransitionHandler は、CSS3により定義された効果を用いるようになっています。これは前述のCSSベースの切替効果を実現するものです。

これら “none” と “css3” のハンドラは、$.mobile名前空間から利用できます。

$.mobile.noneTransitionHandler
$.mobile.css3TransitionHandler

切替効果ハンドラ

切替効果のハンドラとは、次のようなものです。

function myTransitionHandler(name, reverse, $to, $from)
{
    var deferred = new $.Deferred();

    // Perform any actions or set-up necessary to kick-off
    // your transition here. The only requirement is that
    // whenever the transition completes, your code calls
    // deferred.resolve(name, reverse, $to, $from).

    // Return a promise.
    return deferred.promise();
}

ハンドラは、必ず Deferred オブジェクトを作り promise を返す必要があります。この promise は、切替効果が実際に完了した時にシステムと連携するためのものです。この時に *deferred.resolve()* を呼ぶかどうかは、機能次第です。もし Deferred オブジェクトの考え方に馴染みが無い場合は "このページ(英語)":http://api.jquery.com/category/deferred-object/ を参照してください。

ハンドラの登録と呼び出し

切替効果のハンドラをつくったら、それをjQuery Mobileに通知するため $.mobile.transitionHandlers に登録してやる必要があります。この時の key が切替効果の名前になります。つまり、実際に用いる際に data-transition 属性に指定する名前です。

// Define your transition handler:

function myTransitionHandler(name, reverse, $to, $from)
{
    var deferred = new $.Deferred();

    // Perform any actions or set-up necessary to kick-off
    // your transition here. The only requirement is that
    // whenever the transition completes, your code calls
    // deferred.resolve(name, reverse, $to, $from).

    // Return a promise.
    return deferred.promise();
}

// Register it with jQuery Mobile:

$.mobile.transitionHandlers["myTransition"] = myTransitionHandler;

登録が終われば、それを data-transition に指定して実際に使うことができます。

Page 2

このリンクがクリックされると、ページ読み込み後にハンドラが用いられます。

CSSベースの切替効果を独自ハンドラで上書きする

前述の通り、デフォルトで用意されている “none” 以外の切替効果は、すべてCSS3のアニメーションにより定義されています。これら既存の効果を上書きしたい場合、名前を重ねたハンドラで再定義することも可能です。たとえば、デフォルトの “slide” 効果をJavaScriptを使った効果で上書きしたい場合、次のようにします。

// Define your transition handler:

function myTransitionHandler(name, reverse, $to, $from)
{
    var deferred = new $.Deferred();

    // Perform any actions or set-up necessary to kick-off
    // your transition here. The only requirement is that
    // whenever the transition completes, your code calls
    // deferred.resolve(name, reverse, $to, $from).

    // Return a promise.
    return deferred.promise();
}

// Register it with jQuery Mobile:

$.mobile.transitionHandlers["slide"] = myTransitionHandler;

これによって、いずれかで “slide” 効果を呼んだ場合は、このハンドラが用いられます。

デフォルトの切替効果ハンドラを上書きする

初期状態では $.mobile.css3TransitionHandler が、デフォルトのハンドラです。指定された切替効果に該当するハンドラが $.mobile.transitionHandlers に見つからない場合は、このハンドラが呼ばれます。独自につくったハンドラをデフォルトにしたい場合は $.mobile.defaultTransitionHandler に設定します。

// Define your default transition handler:

function myTransitionHandler(name, reverse, $to, $from)
{
    var deferred = new $.Deferred();

    // Perform any actions or set-up necessary to kick-off
    // your transition here. The only requirement is that
    // whenever the transition completes, your code calls
    // deferred.resolve(name, reverse, $to, $from).

    // Return a promise.
    return deferred.promise();
}

$.mobile.defaultTransitionHandler = myTransitionHandler;

これによって $.mobile.transitionHandlers に無い効果を呼んだ場合は、このハンドラが用いられることになります。