【技术分享】JQuery Mobile转场分析

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

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便可 

 

Css代码  

 

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