页面转场 Page transitions
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允许自定义页面转场,具体请查看
Css代码
- .in, .out {
- -webkit-animation-timing-function: ease-in-out;
- -webkit-animation-duration: 350ms;
- }
=================================================================================================
页面中页面切换动画:
jQuery Mobile可以实现页面的切换效果。在同一个Html文件里面,可以定义多个page,切换时直接使用超链接就可以了。
<body>
<div data-role="page" id="main" data-transition="pop">
<a href="#page2" >链接2</a>
</div>
<div data-role="pag" id="page2">
</div>
</body>
系统默认显示page的内容,不显示page2的内容,点击链接后切换到page2的内容。通过“data-transition”实现动画定义。jQuery Mobile实现了上下左右滑动,淡出,弹出,反转等动画。
如果需要转到的HTML是其他链接,不是内部page,需要加上rel='external'属性,此时动画效