jQueryMobile ページ遷移のアニメーションエフェクト

スマートフォン 授業



ページ遷移のアニメーションエフェクト


  • トップページ（#index）から各ページへのリンクをタップすると、ページが左右にスライドしながら遷移する
  • jQuery Mobileではさまざまなページ遷移のアニメーションエフェクトが用意されており、a要素に対してカスタムデータ属性「data-transition="エフェクトの種類"」を指定することで変更できる

<a href="#about" data-transition="エフェクトの種類">


ページ切替効果

  • ページ切替効果の確認画面



jQuery Mobile 1.1.0 日本語リファレンス


スライドアニメーション

  • data-transitionに「slide」を指定すると、ページが左右にスライドして切り替わる「スライドアニメーション」が適用される
  • jQuery Mobileのデフォルトのアニメーション
<a href="#about" data-transition="slide">



スライドアップアニメーション

  • data-transitionに「slideup」を指定すると、ページが下から上にスライドして切り替わる「スライドアップアニメーション」が適用される
<a href="#about" data-transition="slideup">


スライドダウンアニメーション

  • data-transitionに「slidedown」を指定すると、ページが上から下にスライドして切り替わる「スライドダウンアニメーション」を適用できる
<a href="#about" data-transition="slidedown">


ポップアニメーション

  • data-transitionに「pop」を指定すると、ページが拡大しながら切り替わる「ポップアニメーション」を適用できる
<a href="#about" data-transition="pop">


フェードアニメーション

  • data-transitionに「fade」を指定すると、ページがフェードイン／フェードアウトで切り替わる「フェードアニメーション」を適用できる
<a href="#about" data-transition="fade">


フリップアニメーション

  • data-transitionに「flip」を指定すると、ページが回転して切り替わる「フリップアニメーション」を適用できる
<a href="#about" data-transition="flip">


デフォルトアニメーションの変更

  • リンク（ページ）単位ではなく、サイト全体でページ遷移のアニメーションを一括して設定したい場合は、jQueryとjQuery Mobileのスクリプトファイルを読み込むscript要素の間に次のようなJavaScriptコードを追加する
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
	$(document).bind("mobileinit", function(){
	$.mobile.defaultTransition = "flip";
	});
</script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>


アニメーションをオフにする

  • ページ遷移時のアニメーションが不要な場合は、「data-transition="none"」や「data-transition=""」のように存在しないアニメーションエフェクトを指定する
<a href="#about" data-transition="none">


逆のアニメーションを設定する　data-direction="reverse"

  • a要素に対してdata-direction属性「reverse」を設定すると、指定したアニメーションと逆向きの動きでリンクを作成できる
  • たとえば、右から左にスライドするアニメーションが設定されているときにreverseを利用すると、ページが左から右にスライドする
<a href="#page1" data-direction="reverse">page1</a>