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

Question

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

我想打开和关闭一个盒子，设置高度从 0 到某个值，反之亦然。

我在这里写了一个例子: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 中它以转换注释开始)。好像没什么变化。

有什么问题吗？？？

谢谢

Answer 1

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

如本 article 中所述

如果它们属于以下类型，则可以实现高性能动画:位置、比例、旋转或不透明度。

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

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