如何檢查瀏覽器是否支持webanimation API？

Question

有沒有辦法檢查瀏覽器是否支持webanimation API，這樣我們就不需要加載webanimations polyfill了？

github上的文檔討論Element.animate和Playback Control。我可以在元素上檢查$ 0.animate，但我不確定如何檢查Playback控件。這是檢查我們是否需要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每晚/ DevEdition可用的規範的一部分和Chrome Canary）。如果你依靠任何這些功能，那麼你可能仍然需要填充。

此外，polyfill應回退到本機實現時，但我想你試圖避免完全下載polyfill？

Answer 2

爲了增加@brianskold反應 - 我用：

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

此作品在Chrome &火狐，如果它不支持回落！