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 这样的 Canvas 库。 .

已经有一些类似的演示与您想要完成的一样，例如 this一个。