2012-04-11 58 views
15

我使用jQuery Mobile和Phonegap爲我的iphone做了一個簡單的應用程序。它工作得很好,但應用程序中使用如下材料過渡到另一個頁面,這是緩慢的地獄:如何加快頁面轉換動畫?

<a data-role="button" id="about_link" data-transition="slide" 
    href="#page3" data-icon="gear" data-iconpos="left"> 
    Settings 
</a> 

只是一個簡單的a這裏做魔術和,導致怪異的400ms的滯後等。

現在經過大量閱讀,我製作了a按鈕a div,並自己處理了點擊事件以使按鈕更快。

$("#about_link").live("touchstart", function(){ 
    slideTo('#page3',false); 
}); 
function slideTo(page,reverse){ 
    $.mobile.changePage(page, { 
     transition: "slide", 
     reverse: reverse 
    }); 
} 

差異是顯着的,但它對我的口味來說仍然太慢。它看起來像jQuery Mobile等待整個按鈕動畫(懸停和點擊)完成,然後再轉到其他頁面。

現在我的問題:

  1. 是touchstart最快的方法是什麼?我使用了其他庫,例如fastclick,但那不是非常快。
  2. 按鈕動畫在這裏是badguy嗎?我可以禁用它嗎?
  3. 你們可以給我提示嗎?谷歌不是我的朋友在這個特別的問題...

Gr。

+0

嘗試不同類型的頁面轉換會做什麼?我的意思是像褪色 – uday 2012-04-11 14:01:56

+0

slideUp看起來更快一點,但這可能只是一個錯覺,因爲方向不同,距離較遠。淡出似乎是相同的。 – 2012-04-11 14:15:33

回答

33

它實際上是在jQuery Mobile的的CSS:

.in, .out { 
    -webkit-animation-timing-function: ease-in-out; 
    -webkit-animation-duration: 350ms !important; 
} 

僅僅調整了MS,你是好。

+2

+1真棒,我即將發佈相同的東西! – uday 2012-04-12 00:00:22

+0

嗨,對不起,這個令人難以置信的遲到迴應:D這確實有幫助,但仍然在iphone上,我覺得事情並非最佳。我有即時響應的應用程序,但仍有一點滯後。還有什麼提示? – 2012-04-17 11:19:11

+7

我不得不使用!important重寫持續時間: -webkit-animation-duration:660ms!important; – appcropolis 2012-07-30 22:22:12