javascript - 在不停止的情况下更改 webkit css 转换的位置/目标值？

Question

是否可以在不停止运行的情况下更改正在运行的过渡的目标位置或属性，使其像平滑过渡一样？

让我解释一个例子，假设我的初始动画如下:

-webkit-transition:-webkit-transform 5s ease-in-out
-webkit-transform: translate3d(300px, 200px, 0px) rotate(20deg);

我用 javascript 设置它，如果在此转换结束之前，我想更改 translate3d 或旋转到新值，但我不想停止转换我希望它顺利转换到这些新值而不会中断正在运行的过渡。如果我使用 javascript 设置新值，它首先停止然后开始向这些新值过渡，这对我来说是一个不希望的结果。

这有可能吗？或者还有另一种方法吗，我不想使用 javascript 通过修改 top/left 等属性来制作动画，我更喜欢 css 动画。

谢谢

Answer 1

我认为最好的、最可调整的方法是用 JS 进行过渡。让 JS 改变转换。 JS 知道它在过渡中有多远，您可以调整“路径”以适应新的目标位置。您甚至可以实现贝塞尔曲线，以在方向不同的情况下获得平滑的曲线。

然而，这是一个 hell 般的工作量。