相当于使用 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 这样的画布库。

已经有一些类似的演示，就像你试图完成的，比如这个。