jQuery Mobile - data-transition属性でアニメーション指定 | 諸葛亮孔明もびっくりですわのブログ

Aタグにdata-transition属性を指定するだけでページ遷移時のアニメーションを指定できます。

iPhoneアプリを触るのは楽しいですよね。

画面がニューっと現れたり、ふわっと消えたり、くるっと回ったり・・etc

jQuery MobileはこれらのアニメーションをJavascriptやCSSを記述することなく、簡単に実現できるよう設計されています。

今日はその実装方法の紹介です。
jQuery Mobileのバージョンは2011/3/25時点の最新版「1.0a3」です。

前提知識 : jQuery Mobileのページ遷移の概要

まずはサンプルソースをご覧ください。
こちらのデモページのソースです。

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>jQuery Mobile Action</title>
<style type="text/css" media="screen">@import "/core/css/jquery.mobile-1.0a3.css";</style>
<script type="text/javascript" src="/core/js/jquery-1.5.js" charset="utf-8"></script>
<script type="application/x-javascript" src="/core/js/jquery.mobile-1.0a3.js" charset="utf-8"></script>
</head>
<body>

<!-- page1 -->
<div id="page1" data-role="page" data-theme="a" data-position="inline">
 <div data-role="header" data-position="inline" data-backbtn="false">
  <h1>page1</h1>
 </div>
 
 <div data-role="content">
  <a data-role="button" href="#page2" data-transition="slide">slide</a>
  <a data-role="button" href="#page2" data-transition="slide" data-direction="reverse">slide reverse</a>
  <a data-role="button" href="#page2" data-transition="slideup">slideup</a>
  <a data-role="button" href="#page2" data-transition="slidedown">slidedown</a>
  <a data-role="button" href="#page2" data-transition="pop">pop</a>
  <a data-role="button" href="#page2" data-transition="fade">fade</a>
  <a data-role="button" href="#page2" data-transition="flip">flip</a>
 </div>
</div>
<!-- page1 -->

<!-- page2 -->
<div id="page2" data-role="page" data-theme="b" data-position="inline">
 <div data-role="header" data-position="inline" data-backbtn="false">
  <h1>page2</h1>
 </div>
 
 <div data-role="content">
  <a data-role="button" href="#page1" data-transition="slide">slide</a>
  <a data-role="button" href="#page1" data-transition="slide" data-direction="reverse">slide reverse</a>
  <a data-role="button" href="#page1" data-transition="slideup">slideup</a>
  <a data-role="button" href="#page1" data-transition="slidedown">slidedown</a>
  <a data-role="button" href="#page1" data-transition="pop">pop</a>
  <a data-role="button" href="#page1" data-transition="fade">fade</a>
  <a data-role="button" href="#page1" data-transition="flip">flip</a>
 </div>
</div>
<!-- page2 -->

</body>
</html>

13行目のdata-role="page"に注目してください。
jQuery Mobileはこの属性が指定されたDIV要素をページとして認識してくれます。

31行目にも同じようにdata-role="page"の記述がありますね。
つまりjQuery Mobile的には、この1枚のHTMLの中に2つのページがあることになります。

実際の見え方はこのような感じです。

次に19行目を見てください。
aタグのhref属性に"#page2"を指定しています。
このaタグをタップするとid="page2"が指定されたdiv要素に遷移します。

遷移先は31行目のdata-role="page"を指定したdiv要素ですね。

なぜこのような仕様になっているのか

もちろん普通のaタグのようにhref="hoge.html"と、別ファイルを指定することも可能ですが、私はこの1枚のHTMLに複数ページを記載する方式をオススメします。

jQuery Mobileを使って構築するサイトはモバイル向けのものです。

ユーザは当然移動しながらサイトを閲覧しますし、閲覧中に通信できない場所に入り込んでしまう場合も多々あります。

この方式であれば、最初にHTMLをロードしてしまえば、その後は無通信状態であってもページ遷移が可能になります。

試しにデモページをロード後にAirplainモードにしてボタンを1つタップしてみてください。
正しくページ遷移できるのが確認できると思います。

本題 : data-transition属性の指定

今度は19行目〜25行目に注目してください。
data-transition属性に様々な属性値が設定されていますね。

この属性値がページ遷移時のアニメーションを表現しています。
内容はこの表の通りです。

属性値	アクション
slide	右から左にスライド
slideup	下から上にスライド
slidedown	上から下にスライド
pop	中央から広がるように
fade	ふわっと
flip	くるっと回転

伝わったでしょうか。たぶん伝わらないですね。
言葉というのは難しいですね。

デモページとこの表を見比べていただくとよいと思います。

逆方向に動かしたい場合はdata-direction="reverse"を指定します。
サンプルコードの20行目と38行目がそれに当たります。

最後に

公式ページにもデモが準備されています。

デモ : jQuery Mobile: Demos and Documentation : Pages

今回紹介したのは、2行目の「Page transitions」の内容です。
興味がありましたら、ぜひ他の項目もご覧になってください。

2011/03/25