Animating在Android本機瀏覽器上翻譯百分比（4.x）

我正在研究一個使用流行的側邊欄交互模式的小型網絡應用程序。當使用CSS3動畫將側邊欄轉換爲視圖時，動畫會從視圖中滾動出來，但停在Android本機瀏覽器的正確位置。Animating在Android本機瀏覽器上翻譯百分比（4.x）

動畫代碼非常簡單：

#wrapper > #off-canvas { 
    -webkit-transform: translate(0, 0); 
     -moz-transform: translate(0, 0); 
     -ms-transform: translate(0, 0); 
     -o-transform: translate(0, 0); 
      transform: translate(0, 0); 
} 
#wrapper > #off-canvas.off { 
    -webkit-transform: translate(80%, 0); 
     -moz-transform: translate(80%, 0); 
     -ms-transform: translate(80%, 0); 
     -o-transform: translate(80%, 0); 
      transform: translate(80%, 0); 
}

你可以看到在JS-小提琴的行爲我做了。代碼有點亂，但行爲顯然是越野車。（當然，你需要爲了在Android設備上重現錯誤）

FIDDLE

當動畫「左」的屬性，一切工作正常。
當使用transform: translate與px值時，一切工作正常。

有沒有其他人遇到過這個問題，並找到解決辦法？
我想使用支持硬件加速的方法來提高應用程序的性能。

來源

2013-05-27 nirazul

你說得對。原生android瀏覽器（不是Chrome）滾動。它不喜歡translate屬性。我只能用margin-left來修復它。

#wrapper > #off-canvas.off { 
    margin-left:80%; 
}

Here's a plunk.

來源

2013-05-27 12:23:28 rGil

雖然您的解決方案解決了這個問題，我寧願一個支持硬件加速，比如'translate'。我已經在我的文章中提到過，我知道這個事實，像'margin'和'left'這樣的東西是正確動畫的。 – nirazul

我錯過了第一次閱讀... – rGil

Animating在Android本機瀏覽器上翻譯百分比（4.x）

回答

相關問題