jQuery Mobile页面转场data-transition

页面转场 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允许自定义页面转场，具体请查看

=========================================================================================

关于使用JQM(JQuery Mobile)看到很多人提出的第一句话就是性能不行,再问就是转场闪屏等.这里就分享下我对转场的一些学习成果. 


JQM的转场实际上利用的全部是CSS,只是简单的一个addClass 和removeClass.下面是带动画转场的函数 

Java script代码  

1. function css3TransitionHandler( name, reverse, $to, $from ) {  
2.   
3.     var deferred = new $.Deferred(),  
4.         reverseClass = reverse ? " reverse" : "",  
5.         viewportClass = "ui-mobile-viewport-transitioning viewport-" + name,  
6.         doneFunc = function() {  
7.   
8.             $to.add( $from ).removeClass( "out in reverse " + name );  
9.   
10.             if ( $from && $from[ 0 ] !== $to[ 0 ] ) {  
11.                 $from.removeClass( $.mobile.activePageClass );  
12.             }  
13.   
14.             $to.parent().removeClass( viewportClass );  
15.   
16.             deferred.resolve( name, reverse, $to, $from );  
17.         };  
18.   
19.     $to.animationComplete( doneFunc );  
20.   
21.     $to.parent().addClass( viewportClass );  
22.   
23.     if ( $from ) {  
24.         $from.addClass( name + " out" + reverseClass );  
25.     }  
26.     $to.addClass( $.mobile.activePageClass + " " + name + " in" + reverseClass );  
27.   
28.     return deferred.promise();  
29. }  

从中可以看到,只有各种的样式切换,除此以外别无它物.至于 $.Deferred()是JQuery提供的延迟处理的机制,这里不做讨论. 

简单看看这个函数的4个参数,分别是转场效果名称、是否回退、前一页面jq对象、目标页面jq对象。处理的逻辑描述起来也非常简单: 

1.是否存在前一个页面,存在增加out 
2.为目标页面增加in和激活页面样式 
3.当页面动画完成删除前一个页面的激活页面样式和目标页面转场样式 


接下来看看CSS部分，其实所有的东西都可以用一个transform(至于transform这里也不做解释)搞定，以slide为例 

Css代码  

1. .slide.out {  
2.     -webkit-transform: translateX(-100%);  
3.     -webkit-animation-name: slideouttoleft;  
4. }  
5.   
6. .slide.in {  
7.     -webkit-transform: translateX(0);  
8.     -webkit-animation-name: slideinfromright;  
9. }  
10.   
11. .slide.out.reverse {  
12.     -webkit-transform: translateX(100%);  
13.     -webkit-animation-name: slideouttoright;  
14. }  
15.   
16. .slide.in.reverse {  
17.     -webkit-transform: translateX(0);  
18.     -webkit-animation-name: slideinfromleft;  
19. }  

实际上就是通过-webkit-animation-name指定了一组动画效果 

Css代码  

1. @-webkit-keyframes slideinfromright {  
2.     from { -webkit-transform: translateX(100%); }  
3.     to { -webkit-transform: translateX(0); }  
4. }  
5.   
6. @-webkit-keyframes slideinfromleft {  
7.     from { -webkit-transform: translateX(-100%); }  
8.     to { -webkit-transform: translateX(0); }  
9. }  
10.   
11. @-webkit-keyframes slideouttoleft {  
12.     from { -webkit-transform: translateX(0); }  
13.     to { -webkit-transform: translateX(-100%); }  
14. }  
15.   
16. @-webkit-keyframes slideouttoright {  
17.     from { -webkit-transform: translateX(0); }  
18.     to { -webkit-transform: translateX(100%); }  
19. }  

所以如果需要扩展自己的类型，只要按照约定新增自己的样式表就可以做到。 




另外关于JQM转场闪屏的问题,其实可以通过下面的样式修正 

Css代码  

1. .ui-page {  
2.     backface-visibility: hidden;  
3.     -webkit-backface-visibility: hidden; /* Chrome and Safari */  
4.     -moz-backface-visibility: hidden; /* Firefox */  
5. }  

只需要在页面元素增加背面不可见,来防止动画发生的时候产生的闪屏.我在HTC G17 的真机环境下,没有任何问题. 


PS:如果需要更改动画速度,只需要更改下面的-webkit-animation-duration即可 

Css代码  

1. .in, .out {  
2.     -webkit-animation-timing-function: ease-in-out;  
3.     -webkit-animation-duration: 350ms;  
4. }  

=================================================================================================

页面中页面切换动画：

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'属性，此时动画效