Chrome の Web アニメーションで JavaScript `animate()` 関数が壊れるのはなぜですか?

Web アニメーションにより、Chrome で JS 関数 animate が機能しなくなる可能性があります

この JavaScript コードは、変更することで「demo」という名前の HTML 要素をアニメーション化しようとします。その位置と色。ただし、Chrome では動作しません。

function animate() {
  var div = document.getElementById('demo');
  div.style.left = "200px";
  div.style.color = "red";
}

問題

Chrome では、問題はグローバル関数 animate() が新たにオーバーライドされることにあります。 WebアニメーションのElementプロトタイプにメソッドを導入しました。これは、イベント ハンドラーのスコープ内でグローバル関数にアクセスできなくなったことを意味します。

解決策

この問題に対処するには、次のオプションを検討してください。

• 関数の名前を変更します: プロトタイプ メソッドとの競合を避けるために、animate の名前を変更します。 animate__.

function animate__() {
  // ... same code as above ...
}

• JavaScript のバインド メソッドを使用します: グローバル animate 関数をイベント ハンドラーのスコープにバインドします。

document.getElementById('demo').onclick = animate.bind(this);

• 要素のネイティブを使用animate() メソッド: ターゲット要素でネイティブの animate() メソッドを直接利用します。

document.getElementById('demo').animate([
  { left: "200px" },
  { color: "red" }
], 2000);

以上がChrome の Web アニメーションで JavaScript `animate()` 関数が壊れるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。