在iPad上jQuery Mobile轉換緩動

Question

我有一套非常簡單的CSS轉換，我稱之爲'realslide'。所有它滑動（而jQuery Mobile的'幻燈片'，幻燈片和淡入淡出）。我試圖讓一些easeOutCubic-like easing工作，動畫在開始時更快，並且在它完成之後緩慢地嵌套。

馬修雷音取得了一個很好的網站自定義CSS寬鬆：http://matthewlein.com/ceaser/

然而，當我加入這jQuery Mobile的，在過渡幾乎是不存在的，非常laggy。這是令人困惑的，因爲它似乎做3D轉換就好了。

有誰知道發生了什麼事？我使用iPad 2/iOS 5.1，jQuery Mobile 1.1.0-RC1，PhoneGap 1.4。

我的jsfiddle：http://jsfiddle.net/4TLLc/

我的過渡：

.realslide.in 
{ 
    -webkit-transform: translateX(0); 
    -webkit-animation-name: slideinfromright; 
} 

.realslide.out 
{ 
    -webkit-transform: translateX(-100%); 
    -webkit-animation-name: slideouttoleft; 
} 

.realslide.in.reverse 
{ 
    -webkit-transform: translateX(0); 
    -webkit-animation-name: slideinfromleft; 
} 

.realslide.out.reverse 
{ 
    -webkit-transform: translateX(100%); 
    -webkit-animation-name: slideouttoright; 
} 

@-webkit-keyframes slideinfromright 
{ 
    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 slideinfromleft 
{ 
    from { -webkit-transform: translateX(-100%);} 
    to { -webkit-transform: translateX(0);} 
} 

@-webkit-keyframes slideouttoright 
{ 
    from { -webkit-transform: translateX(0);} 
    to { -webkit-transform: translateX(100%);} 
} 

殺死的PhoneGap的WebKit窗口動畫：

.ui-page 
{ 
    -webkit-transition: all 750ms cubic-bezier(1.000, 1, 0.265, 1); /* older webkit */ 
    -webkit-transition: all 750ms cubic-bezier(1.000, 1.650, 0.265, 1.550); 
     -moz-transition: all 750ms cubic-bezier(1.000, 1.650, 0.265, 1.550); 
     -ms-transition: all 750ms cubic-bezier(1.000, 1.650, 0.265, 1.550); 
     -o-transition: all 750ms cubic-bezier(1.000, 1.650, 0.265, 1.550); 
      transition: all 750ms cubic-bezier(1.000, 1.650, 0.265, 1.550); /* custom */ 
} 

Answer 1

嘗試用translate3d(x, y, z)更換translateX(x)。

translate3d觸發器gpu加速其中translateX沒有。