javascript - 等效于使用 CSS3 过渡时的 jQuery.animate 步进函数

Question

我正在使用 CSS 过渡来为屏幕周围的圆圈（节点）设置动画。

CSS：

.circle {-webkit-transition: all 0.8s ease-in-out; }

JS：

 $('.circle').css({ webkitTransform: "translate3d(20px, 20px, 0px)" })

我希望能够随时了解翻译属性，以便更新连接节点的线。

如果我使用 jQuery 动画，我可以使用“step”函数。CSS过渡中有类似的东西吗？我已经看到了“webkitTransitionEnd”事件，但没有针对单个动画步骤。

还是我必须用计时器来做？

Answer 1

理论上，您可以使用计时器并获取动画元素的计算值，但它几乎可以保证运行缓慢。我从来没有觉得需要逐步访问计算值，并且只是同时启动了 2 个或更多动画。

如果你想为更复杂的东西制作动画，比如在它们之间有线条的圆圈，你应该考虑使用像raphael这样的画布库。

已经有一些类似的演示，比如你想要完成的，比如这个。