JavaScript

KeyframeEffect is not defined

Firefox DevTools Playground 是由 Firefox 所建立,一個教你如何使用開發者工具的地方。如果有仔細研究的話,會發現他有一個地方的範例在執行上似乎有問題,會出現 KeyframEffect is not defined 的錯誤。主要是因為 KeyframeEffect 這個 API 還沒在大多數瀏覽器上實現,目前 Firefox 跟 Chrome 都支援了,但是執行上還是會有錯誤,需要一些調整。

以下是解決辦法:

A. 載入 Polyfill

如果你本身不是 Firefox Developer Edition 或是 Chrome Canary 版本的話,都是還沒支援的,詳細支援狀況可以到這邊查看。針對其他尚未支援的版本該如何處理呢?

解決辦法

你必須要載入特定的 web-animations-next-2.2.0.min.js 檔案,你可以開啟 Firefox 所提供的範例 [ CodePen | jsFiddle ],並嘗試點擊火狐 Logo,目前應該不會有任何動作,並且在 Console 裡會看到錯誤訊息。

接下來只要將這個 js 檔載入後並重新執行,應該就可以正常了!

1
https://s3-us-west-2.amazonaws.com/s.cdpn.io/61811/web-animations-next-2.2.0.min.js

B. 針對 Firefox 的解決辦法

你可以在 KeyframeEffect API 裡最下面看到這個訊息

The Web Animations API is only enabled by default in Firefox Nightly builds. It was enabled in Developer Edition until 58, when it is no longer enabled by default. You can enable it in beta and release builds by setting the preference dom.animations-api.core.enabled to true, and can disable it in any Firefox version by setting this preference to false.

意思就是目前 Firefox Nightly 是預設開啟的,但 Firfox Developer Edition 預設是關閉的,必須要手動開啟。

解決辦法

請務必注意!本解法是針對 Developer Edition,請在網址列開啟 about:config,並搜尋 dom.animations-api.core.enabled 將設定打開。這樣子應該就可以正常執行了!

關於 WAAPI

WAAPI 的全名是 Web Animations API,由 W3C 提出。目的是為了要提供一個瀏覽器能原生支持的動畫解決方案,不過因為這些功能都還在實驗中,有些範例可能會有無法執行的狀況。你可以到這裡查看你的瀏覽器支援了哪些功能,也有另外載入Polyfill的版本,可以看到有載 Polyfill 的會多支援一些功能(也沒到完全支援),不過目前應該是夠用了!