• 【技术分享】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. }   

    原文链接  http://peng-jiesi.iteye.com/blog/1457463

     
  • 相关阅读:
    uniapp
    uniapp
    uniapp
    偶然发现的一天
    了不起的麦瑟尔夫人第三季
    女性长期没有"恩爱",会出现这4个后果?提醒:频率最好能在这个数
    IntelliJ IDEA live template 方法配置
    使用MHA实现MySQL主从复制高可用
    Linux 常用命令介绍
    开源堡垒机
  • 原文地址:https://www.cnblogs.com/babysay123/p/4573294.html
Copyright © 2020-2023  润新知