为什么 Web Animation API reverse() 会导致我的动画跳转？答案

【问题标题】：Why does Web Animation API reverse() cause my animation to jump?为什么 Web Animation API reverse() 会导致我的动画跳转？
【发布时间】：2020-04-30 11:23:51
【问题描述】：

Docs everywhere 表示在播放动画时调用reverse() 与将playbackRate 设置为-1 相同，但是当使用reverse() 时我的动画会像疯了似的跳跃。 playbackRate 工作正常。我真的很想使用reverse()，因为它是独立于状态的，但我怕我不明白。

我在这里有一个代码沙盒上旋转正方形的小例子：

https://codesandbox.io/s/small-browser-1bkdt?file=/src/index.js

是我做错了什么还是reverse()没有那么简单？

更新：

这可能是 Codesandbox 错误，因为 @Kaiido 的 this fiddle 工作正常。
我使用的是 Firefox 75.0 和 MacOS。 Chrome 似乎工作正常。

【问题讨论】：

它看起来可以在 Chrome 中找到。光滑的。我没有看到任何跳跃。
@will 哦，天哪。我用的是火狐。我检查了一下，它实际上在 Chrome 中运行良好......
Weird... 有时可以在代码盒中重现，但不能在 this fiddle 或 StackSnippets 中...（macO 上的 FF 75 和 77）
@Kaiido 哇，它在你链接的小提琴中确实可以正常工作。也许这是一些奇怪的 Codesandbox 错误。
@brianskold 感谢您的检查。 Codesandbox 团队告诉我，在 sandbox.config.js 中禁用“无限循环保护”可能会有所帮助。这样做并分叉项目对我在 75、76 和 77 上都有帮助。所以，我认为这不是 Firefox 错误。

标签： javascript css web-animations

【解决方案1】：

正如this codesandbox issue 所清楚的那样，可以通过禁用sandbox.config.json 中的“无限循环保护”来解决跳跃行为。在项目开始正常工作之前，我还必须分叉该项目。这可能不是 Firefox 的问题。

【讨论】：