《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.8 技巧:指定自定义的过渡动画

本节书摘来自异步社区《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。

上一篇:wordpress如何使用wp_rewrite实现自定义伪静态,非301重定向。


下一篇:CLR via C# 3rd - 02 - Building, Packaging, Deploying, and Administering Applications and Types