在Phonegap中缓慢的JQuery Mobile面板

Question

我正在JQM中为Phonegap应用程序实现一个幻灯片面板，但由于某种原因，当我打开尝试在Android 4.x上打开它时需要1500毫秒才能显示，但在Android 2.x，iOS和Blackberry中显示瞬间。

$(document).on("touchstart","img#openLeft", function()
{
     $('#mydiv').panel("toggle");
}

请问您能告诉我在不删除滑动动画的情况下，我可以采用什么策略让面板显得更快？

谢谢！

PS我正在使用JQuery Mobile 1.3.0

Answer 1

我最后修改了JQM-1.3.0.css来修复这个问题，结果证明它们不是硬件加速的。

on：

• @ - webkit-keyframes slideinfromright
• @ - moz-keyframes slideinfromright
• @keyframes slideinfromright
• @ - webkit-keyframes slideinfromleft
• @ - moz-keyframes slideinfromleft
• @keyframes slideinfromleft
• @ - webkit-keyframes slideouttoleft
• @ - moz-keyframes slideouttoleft
• @keyframes slideouttoleft
• @ - webkit-keyframes slideouttoright
• @ - moz-keyframes slideouttoright
• @keyframes slideouttoright
• .slide.out
• .slide.in
• .slide.out.reverse
• .slide.in.reverse

我更改了-webkit-transform: translateX(x);

的所有-webkit-transform: translate3d(x,0,0);

我还将动画更改为data-display="push"，这似乎比data-display="reveal"更快，因为它在翻译时启动动画，而不是等待内容翻译并在之后显示。

Answer 2

正如文档所述，这些都是由硬件加速的。可能是你的4.0设备表现不佳。

您可以通过将data-animate="false"添加到窗格的div来禁用动画。它在documentation中提到。