页面转场 Page transitions
给链接添加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; }
再次提醒,测试要彻底
给链接或者表单的提交添加转场效果
<a href="index.html" data-transition="pop">I'll pop</a>
data-direction="reverse"
页面转场的全局设置
浏览器的支持和表现
为不支持3D转场的情况 定义 平稳退化的 转场效果
$.mobile.transitionFallbacks.slideout = "none"
设置转场的最大宽度
JQM的转场实际上利用的全部是CSS,只是简单的一个addClass 和removeClass.下面是带动画转场的函数
- function css3TransitionHandler( name, reverse, $to, $from ) {
- var deferred = new $.Deferred(),
- reverseClass = reverse ? " reverse" : "",
- viewportClass = "ui-mobile-viewport-transitioning viewport-" + name,
- doneFunc = function() {
- $to.add( $from ).removeClass( "out in reverse " + name );
- if ( $from && $from[ 0 ] !== $to[ 0 ] ) {
- $from.removeClass( $.mobile.activePageClass );
- }
- $to.parent().removeClass( viewportClass );
- deferred.resolve( name, reverse, $to, $from );
- };
- $to.animationComplete( doneFunc );
- $to.parent().addClass( viewportClass );
- if ( $from ) {
- $from.addClass( name + " out" + reverseClass );
- }
- $to.addClass( $.mobile.activePageClass + " " + name + " in" + reverseClass );
- return deferred.promise();
- }
从中可以看到,只有各种的样式切换,除此以外别无它物.至于 $.Deferred()是JQuery提供的延迟处理的机制,这里不做讨论.
简单看看这个函数的4个参数,分别是转场效果名称、是否回退、前一页面jq对象、目标页面jq对象。处理的逻辑描述起来也非常简单:
1.是否存在前一个页面,存在增加out
2.为目标页面增加in和激活页面样式
3.当页面动画完成删除前一个页面的激活页面样式和目标页面转场样式
接下来看看CSS部分,其实所有的东西都可以用一个transform(至于transform这里也不做解释)搞定,以slide为例
- .slide.out {
- -webkit-transform: translateX(-100%);
- -webkit-animation-name: slideouttoleft;
- }
- .slide.in {
- -webkit-transform: translateX(0);
- -webkit-animation-name: slideinfromright;
- }
- .slide.out.reverse {
- -webkit-transform: translateX(100%);
- -webkit-animation-name: slideouttoright;
- }
- .slide.in.reverse {
- -webkit-transform: translateX(0);
- -webkit-animation-name: slideinfromleft;
- }
实际上就是通过-webkit-animation-name指定了一组动画效果
- @-webkit-keyframes slideinfromright {
- from { -webkit-transform: translateX(100%); }
- to { -webkit-transform: translateX(0); }
- }
- @-webkit-keyframes slideinfromleft {
- from { -webkit-transform: translateX(-100%); }
- to { -webkit-transform: translateX(0); }
- }
- @-webkit-keyframes slideouttoleft {
- from { -webkit-transform: translateX(0); }
- to { -webkit-transform: translateX(-100%); }
- }
- @-webkit-keyframes slideouttoright {
- from { -webkit-transform: translateX(0); }
- to { -webkit-transform: translateX(100%); }
- }
所以如果需要扩展自己的类型,只要按照约定新增自己的样式表就可以做到。
另外关于JQM转场闪屏的问题,其实可以通过下面的样式修正
- .ui-page {
- backface-visibility: hidden;
- -webkit-backface-visibility: hidden; /* Chrome and Safari */
- -moz-backface-visibility: hidden; /* Firefox */
- }
只需要在页面元素增加背面不可见,来防止动画发生的时候产生的闪屏.我在HTC G17 的真机环境下,没有任何问题.
PS:如果需要更改动画速度,只需要更改下面的-webkit-animation-duration即可
- .in, .out {
- -webkit-animation-timing-function: ease-in-out;
- -webkit-animation-duration: 350ms;
- }