Jquery Mobile转场特效

Jquery Mobile框架内置了一套基于css的页面转场效果，你可以给任何通过ajax对象或页面添加。

给链接添加data-transition属性，可以设定自定义的页面转场效果

<a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="fade" data-inline="true">dialog</a>

<a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="pop" data-inline="true">dialog</a>

<a href="page-transitions-dialog.html" data-role="button" data-rel="dialog"  data-transition="flip" data-inline="true">dialog</a>

<a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="turn" data-inline="true">dialog</a>

<a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="flow" data-inline="true">dialog</a>

<a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slidefade" data-inline="true">dialog</a>
<a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slide" data-inline="true">dialog</a>

<a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slideup" data-inline="true">dialog</a>

<a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slidedown" data-inline="true">dialog</a>

<a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="none" data-inline="true">dialog</a>

重要注意事项：有些移动平台目前对css3的transitions支持还有问题。我们目前正在想办法一劳永逸的解决这个问题。如果你的项目在页面转场的过程中或结束时有页面闪烁的问题，我们建议采用下面的方法。请注意在部署之前在目标的平台上进行彻底的测试。这个二房会造成一些性能上的问题，有可能会使部分浏览器崩溃，特别是安卓系统上的。此方法为加上下面的一段css....
.ui-page { -webkit-backface-visibility: hidden; }
再次提醒，测试要彻底

只看到了淡入淡出的效果？ 想要看到页面翻转的转场效果，浏览器必须支持3D transforms。默认情况下，不支持css3d的设备（必如安卓2.x）会退化为“淡入淡出”的转场效果。

给链接或者表单的提交添加转场效果

默认情况下，Jquery Mobile应用的是从 淡入淡出的转场效果。如果想要自定义转场特效，需要给链接添加 “data-transition”属性

<a href="index.html" data-transition="pop">I'll pop</a>

当后退按钮按下时，框架会自动使用“后退”转场效果退到上一个页面，如果想强制给转场应用“后退”的转场效果，可以链接添加
data-direction="reverse"

页面转场的全局设置

如果你想给全局设置一个不一样的默认转场效果，可以设置 defaultPageTransition。如果想把对话框的popup默认效果设置为一个不一样的话，则需要设置 defaultDialogTransition。

浏览器的支持和表现

jquery mobile中所有的动画都是通过css的关键帧动画技术实现的，并且包含了 -webkit的前缀来针对iOS, Blackberry, Android, Safari 和 Chrome浏览器，以及  -moz前缀来针对火狐浏览器，是否支持css的关键帧动画技术取决于浏览器的版本和 移动设备的硬件，如果不支持的话，转场会安全地退化为无动画的效果，

为不支持3D转场的情况 定义 平稳退化的 转场效果

默认情况下，除了淡入淡出外所有转场都需要3D支持。如果设备不支持的话，转场会安全地退化为淡入淡出效果。我们这样做是想主动地排除像Android 2.x那样表现不佳的平台，并确保他们仍然有一个流畅的体验。但是Android 3.0支持3D变换，，但仍然表现不佳（闪屏？），所以我们不能保证每个浏览器都表现良好。

所以可以给每种转场效果都设置一个备选的转场，以备浏览器不支持的情况，默认情况下指定的为“fade”,例如，下面的代码可以将slideout的转场设置为“无”

$.mobile.transitionFallbacks.slideout = "none"

设置转场的最大宽度

默认情况下，当窗口宽度大于一定值的时候，转场效果可能会被关闭。因为转场效果会消耗系统资源，所以屏幕太宽的时候表现可能会不佳。通过 $.mobile.maxTransitionWidth可以设置这个宽度，默认情况下值为false。它也接受一个数字，代表能够发生转场效果的最大宽度。

创建自定义的基于css的转场效果

jQuery Mobile允许自定义页面转场，具体请查看