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

我在包装容器div中有一个“堆栈”子div。这些子div看起来是向下滑动的，因为新的子div不断附加到顶部，并提供.slideDown（）动画，从而强制所有其他子div也向下移动。这工作很好，但我在PhoneGap应用程序中使用它，当快速完成时，它会出现起伏和跳跃。我听说这可以通过让css转换来做得更好，这迫使硬件加速（我认为）。然而，我看到的每一个例子似乎都在尝试比我需要的复杂得多的事情，我无法理解，所以如果这是可能的话，任何帮助都将不胜感激

jQuery代码：

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

---

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

这不会那么容易

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

你该怎么办？有几种可能性，但我建议：

按原样添加div，不带过渡。同时，在包装器上设置样式为的转换

transform: translateY(***px);

应计算此变换以补偿新div，以便任何移动（新div将渲染在当前div之上，并可能超出视口）

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

---

祝你好运

将初始高度设置为

0

并将

transition

添加到CSS中，创建另一个具有正确高度的类，并在元素前面添加javascript，然后ta da！我将行高度设置为0，并将行“transition:height 1s ease in”放在row类中。然后我有另外一节课，上面写着“身高：20%”，我在前面加了一次，但它没有完成过渡，不确定正确的方式。好吧，我试着这么做，但我不认为我完全遵循了。我使用row.prependTo（“#blockArea”）；这通常会添加行。然后我应该向包含transform的包装器中添加一个类：translateY（***px）；。。。这不就是将整个区块区域移到页面下方，而不是移到行下方吗？不完全是这样。我的建议是使用translateY将其向上移动。最终的结果是插入的div向下的移动不会显示出来。移动blockArea应该移动行，因为行位于rowarea内部

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