3

有没有办法检查浏览器是否支持 webanimation API，这样我们就不需要加载 webanimations polyfill？

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

4

3 回答 3

2

要添加到@brianskold 响应中-我使用了：

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

这适用于 Chrome 和 Firefox，如果不支持则回退！

于 2016-11-07T15:18:38.490 回答
1

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

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

Firefox 将Element.animate在 Firefox 48（目前处于测试阶段）中包含播放控制。

我预计 Safari 或 Edge 都不会在Element.animate 没有播放控制的情况下发布。

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

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

于 2016-06-10T00:10:56.700 回答
1

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

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

这个 polyfill 项目可能适合您的需求。我将它用于几个项目并对此感到满意： https ://github.com/web-animations/web-animations-js

于 2018-06-27T20:09:55.060 回答