本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第9章，第9.7节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看
9.7 技巧：指定过渡动画
当点击一个会使用AJAX加载页面的内部链接时，jQuery Mobile提供了过渡动画。默认情况下，你会看到页面滑向左侧。
jQuery Mobile准备了少量的默认动画供你选择。它们是pop、slidefade、slide、slideup、slidedown、fade和flip。代码清单9-8演示了如何更改链接上的动画。
代码清单9-8 使用动画导航至第二张页面
00 <!DOCTYPE html>
01 <html>
02 <head>
03 <title>Transition</title>
04 <meta name="viewport"
05 content="width=device-width, initial-scale=1">
06 <link rel="stylesheet" href=
07 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css">
08 <script type="text/javascript"
09 src="http://code.jquery.com/jquery-1.7.1.min.js">
10 </script>
11 <script type="text/javascript" src=
12 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">
13 </script>
14 </head>
15 <body>
16
17 <div data-role="page">
18
19 <div data-role="header">
20 <h1>First</h1>
21 </div>
22
23 <div data-role="content">
24 <p>Hello world <a href="#second" data-transition="pop">and go
25 to the second</a></p>
26 <!-- or slide, slipdeup, slidedown, fade or flip
27 (support for flip is limited on Android) -->
28 </div>
29
30 </div>
31
32 <div data-role="page" id="second">
33
34 <div data-role="header">
35 <h1>Second</h1>
36 </div>
37 <div data-role="content">
38 Hello again!
39 </div>
40
41 </div>
42
43 </body>
44 </html>
第24行引进了data-transition属性。这个属性也可用于form元素上。框架底层会处理动画。
