本节书摘来自异步社区《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  01  02  03　　 04　　
     06　　
    08　　26　　29　　32  33  34 35 
    
     36 37　 
     
      38　　 
      
First
39　 
     
40 41　 
     
      　42　 43　　 
      
Hello world and go44　　　　 to the second
　 45　　　　46　 
     
47　 48 
    
49 50 
    
     51 52　 
     
      53　　 
      
Second
54　 
     
55　
     
      56　　 Hello again!57　
     
58 59 
    
60 61 62 

在代码清单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";

$.mobile.maxTransitionWidth = 640;