【技術分享】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