javascript - 使用 CSS 按恒定量翻译元素以获得更流畅的动画？

Question

是否可以使用 CSS 将一个元素翻译成一个常数？例如，我们想以 50 像素的增量在屏幕上移动一个 div。现在，我们使用手动更新翻译值，但这会产生断断续续的效果。

这是代码，其中 translate 等于每次调用此行时递增 50 的值:

$(element).css( '-webkit-transform', 'translate3d( 0, ' + translate + 'px, 0)' );

我们需要在移动设备上完成这项工作，所以我们不能使用 jQuery animate，因为它在移动设备上不够流畅(根据我们的经验)。我们需要按常量进行翻译，因为我们需要跟踪元素的位置，所以我们每隔 X 毫秒调用一次翻译代码。

Answer 1

我不会不断地触发重复的动画，而是设置一个具有适当值的动画，然后 detect the current position在你的循环中，而不是试图在其中做动画。 This updated example从链接的问题来看似乎表明它会起作用。

您可能想询问 transform property如果它们比简单的顶部/左侧更复杂，则获取当前的翻译值。你应该得到一个看起来像这样的值:

matrix(1, 0, 0, 1, 0, 300)