Question

我正在尝试在phonegap应用程序中使用硬件加速。我已经读过，我必须为这个pourpose添加一个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中它以变换注释开始）。似乎没有任何改变。

有什么不对吗???

THX

Answer 1

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

正如本article

所述

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

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

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

Phonegap App中的CSS硬件加速

1 个答案: