android - Phonegap应用中的CSS硬件加速

我正在尝试在phonegap应用程序中使用硬件加速。我读过我为此必须放置一个css 3dtransform。因此，我在html元素的主类中使用了webkit-transform3d，但是在动画制作过程中我仍然看到一些滞后。

我想打开和关闭一个框，设置是从0到somevalue的高度，反之亦然。

我在这里写了一个例子：http://jsfiddle.net/VG7V5/6/

如您所见，我以这种方式定义了类容器：

#container {
    box-shadow: 0.1em 0.1em 0.2em 0em #777777;
    width: 100%;
    max-height: 15em;
    overflow-y: auto;
    transform: translate3d(0em,0em,0em);
    -webkit-transform:translate3d(0em,0em,0em);
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
}

如果我在装有Android 4.4.2的Nexus 5上打开该示例，则在启用或不启用transform3d的动画过程中都会看到一些滞后现象（实际上，在jsfiddle中它以注释的转换开始）。似乎没有任何变化。

有什么不对？？？

谢谢

最佳答案

也许我自己找到了解决方案。

如此article中所述

如果具有以下类型，则可以实现高性能动画：位置，比例，旋转或不透明度。

本质上，动画不应更改元素的尺寸，因为它会给cpu / gpu带来过多的开销。

因此，例如在我的示例中，更改元素的高度并不是一个好主意。 ：D