javascript - 保持css动画状态

Question

我正在将 css 关键帧动画应用于元素。我只为一个简单的变换指定一个关键帧（100%）。在动画运行时，我暂停使用动画播放状态并应用一个指定不同关键帧动画的类。我想要的是第二个动画从第一个动画被中断的地方开始，而是元素跳回到它的开始位置并从那里开始动画。我用动画填充模式玩了一点，但它没有改变，我认为这是因为动画在达到 100% 之前被中断。有什么想法我可以做些什么来完成这项工作？

Answer 1

几天前，我实际上正在集思广益。您假设您的问题是动画未达到 100% 的结果是正确的。问题是没有办法简单地选择指示动画在动画中的距离的值。由此，您有以下三个选项（注意：我没有测试所有选项）：

1. 您可以将动画分成定义的步骤（10% 间隔、20% 间隔等），然后仅在其中一个步骤上暂停。这可能是最安全的解决方案，但您可能必须按时确定（即setInterval，等 - 糟糕！）
2. 您可以使用 JavaScript 计算（也基于时间 - Double Yuck！）元素在哪里，并keyframe相应地设置一个新元素
3. 您可以尝试在动画暂停时查看元素的属性（我没有尝试过，我非常怀疑它会起作用）

Answer 2

http://jsfiddle.net/gxve9/1/

动画实际上并没有改变 css，它们只是对其进行动画处理，然后将其放回原来的位置。你只需要使用 javascript 来保存 css 使用类似的东西

var prevWidth = $("div").css("width");

然后在暂停动画后，将其设置为

$("div").css("width",prevWidth);.

这样它就可以永久设置在第一个动画放置的位置。

Answer 3

你有几个选择：

1. 将新动画附加到具有不同播放状态的列表中。这不是很可扩展，但适用于某些情况。
2. 使用捕获动画值getComputedStyle并自行应用。这样做的缺点是，对于transform，返回的值getComputedStyle被转换为一个matrix()值，因此旋转动画的插值有时会表现不同。
3. 用来commitStyles()为你做。问题在于浏览器支持。它应该可以在最新的 Firefox 和 Safari 以及下一个版本的 Chrome 中运行（在 Canary 中适用于我）。

您可以在此处查看演示的每种方法：https ://jsfiddle.net/birtles/8bv5of6n/14/