本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第9章，第9.8节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看
9.8 技巧：指定自定义的过渡动画
假使需要不同的动画，而不是在前面的示例中提供的默认动画集，你可以引进自定义的动画。你可以使用CSS3变换（CSS3 transition）来创建平滑的硬件加速动画，包含2D和3D。
代码清单9-9提供了一个示例动画：打开新页面时旋转页面。
代码清单9-9 使用自定义CSS3变换来切换页面
00 <!DOCTYPE html>
01 <html>
02 <head>
03 <title>Custom 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 <style>
09 .mine.in {
10 -webkit-animation-name: myslidein;
11 }
12
13 .mine.out {
14 -webkit-animation-name: myslideout;
15 }
16
17 @-webkit-keyframes myslidein {
18 from { -webkit-transform: rotateZ(0deg) scale(0);}
19 to { -webkit-transform: rotateZ(360deg) scale(1); }
20 }
21 @-webkit-keyframes myslideout {
22 from { -webkit-transform: rotateZ(360deg) scale(1); }
23 to { -webkit-transform: rotateZ(0deg) scale(0); }
24 }
25 </style>
26 <script type="text/javascript"
27 src="http://code.jquery.com/jquery-1.7.1.min.js">
28 </script>
29 <script type="text/javascript" src=
30 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">
31 </script>
32 </head>
33 <body>
34
35 <div data-role="page">
36
37 <div data-role="header">
38 <h1>First</h1>
39 </div>
40
41 <div data-role="content">
42
43 <p>Hello world <a href="#second" data-transition="mine">and go
44 to the second</a></p>
45
46 </div>
47
48 </div>
49
50 <div data-role="page" id="second">
51
52 <div data-role="header">
53 <h1>Second</h1>
54 </div>
55 <div data-role="content">
56 Hello again!
57 </div>
58
59 </div>
60
61 </body>
62 </html>
在代码清单9-9中，仍然看不到一丁点儿自定义的JavaScript代码。可以看到，第43行有个data-transition属性，引用了一个自定义值，即mine。当需要过渡动画时，jQuery Mobile会使用这个值来添加class属性。
在第9～15行的CSS声明中，你发现有两个定义，即mine类和in类的组合使用以及mine类out类的组合使用。两者的CSS实现引用了第17～24行指定的CSS3动画。
在第17～24行，你发现CSS声明在变换过程中会使页面发生旋转。使用-webkit-前缀，这些动画就只能在iOS、Safari以及Chrome上工作。为使这些动画能在其他浏览器上工作，可以添加–moz-、-ms-，或者当未来某个时候标准发展完备时，可以省去前缀。这里准备的示例针对的是iPhone和iPad。
如果你正在使用jQuery Mobile并且使用的浏览器不支持3D变换，则会退回到简单的渐变变换（fade transition）。你也可以选择覆盖默认行为，将某些变换改为别的行为。可以更改全局配置来做到这一点，比如：
$.mobile.transitionFallbacks.slideout = "none";
另一种可能希望覆盖页面变换的情况是：大屏幕上的效果可能是断断续续的。可以通过设置 maxTransitionWidth 值来改变这种情况，如下所示：
$.mobile.maxTransitionWidth = 640;
当设备的屏幕宽度大于640时，这会把变换设置为none。
