你如何检查浏览器是否支持 webanimation API？

Question

有没有办法检查浏览器是否支持网络动画 API 这样我们就不需要加载网络动画 polyfill？

github 上的文档讨论了 Element.animate 和播放控制。我可以检查元素上的 $0.animate 但我不确定如何检查播放控件。这是检查我们是否需要 polyfill 的准确方法吗？

Answer 1

如果 Element.animate 存在，我认为假设播放控制也是合理的。

Chrome 最初在 Chrome 36 中提供 Element.animate 支持。它在 Chrome 39 中添加了播放控制，现在已经发货很长时间了（当前 Chrome 是 51).

Firefox 将发布 Element.animate，包括 Firefox 48 中的播放控件（目前处于测试阶段）。

我预计 Safari 或 Edge 都不会 Element.animate 没有播放控制。

但是，规范中还有一些其他功能尚未由任何浏览器提供，例如 finished 承诺、effect 属性或附加动画（尽管某些这些功能在 Firefox Nightly/DevEdition 和 Chrome Canary 中可用）。如果您依赖这些功能中的任何一个，那么您可能仍然需要 polyfill。

此外，polyfill 应该在可用时回退到本机实现，但我想您是想完全避免下载 polyfill？

Answer 2

添加到@brianskold 回复中 - 我使用了：

if ('animate' in elementToAnimate) {
 // do something
} else {
 // fallback code 
}

这在 Chrome 和 Firefox 中有效，如果不支持则回退！

Answer 3

没有安全的检查方法，因为某些浏览器可能未完全实现 API 但仍实现 Element.animate。

您可能想使用 polyfill 而不是检查，如果存在的话，它会下降到 API。

这个 polyfill 项目可能符合您的需要。我将它用于几个项目并且对它很满意： https://github.com/web-animations/web-animations-js

你如何检查浏览器是否支持 webanimation API？

How do you check if webanimation API is supported in the browser?

animation

web-animations