使用 css 向下滑动（硬件加速）

Question

我在包装容器 div 中有一个“堆栈”子 div。这些子 div 似乎会向下滑动，因为新的子元素不断地附加到顶部并赋予 .slideDown() 动画，因此也迫使所有其他子元素向下滑动。这工作正常，但我在 PhoneGap 应用程序中使用它，当快速完成时，它看起来波涛汹涌和跳跃。我听说这可以通过进行 css 转换来做得更好，这会强制硬件加速（我认为）。但是，我看到的每个示例似乎都在尝试比我需要的复杂得多的东西，我无法弄清楚，所以如果可能的话，任何帮助将不胜感激。

jQuery 代码：

row.hide().prependTo('#blockArea').slideDown(1000, 'linear');

blockArea 是包装器，row 是要添加的行。

Answer 1

不会那么容易...

如果你真的想使用硬件加速获得更好的结果，你不能依赖高度转换。

你应该怎么做？有几种可能性，但我会推荐：

按原样添加 div，没有过渡。同时，在包装器上设置一个变换，样式为

transform: translateY(***px);

应该计算这个变换来补偿新的 div，以便任何东西移动（新的 div 将呈现在当前的上方，并且可能超出视口）。

also, set a transition on transform of the time that you want.

现在，在延迟函数中，将变换更改为 translateY(0px)。可以在 0 毫秒的 setTimeout() 内完成。您需要这样做以便应用过渡

祝你好运！