Mengapakah Fungsi `animate()` JavaScript Saya Terputus dalam Animasi Web Chrome?

JS Function animate Mungkin Pecah dalam Chrome Akibat Animasi Web

Kod JavaScript ini cuba menghidupkan elemen HTML bernama "demo" dengan menukar kedudukan dan warnanya. Walau bagaimanapun, ia gagal berfungsi dalam Chrome.

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

Masalahnya

Dalam Chrome, isunya terletak pada fungsi global animate() yang ditindih oleh yang baru kaedah yang diperkenalkan pada prototaip Elemen dalam Animasi Web. Ini bermakna fungsi global tidak lagi boleh diakses dalam skop pengendali acara.

Penyelesaian

Untuk menangani masalah ini, pertimbangkan pilihan berikut:

• Namakan semula Fungsi: Namakan semula animasi untuk mengelakkan konflik dengan kaedah prototaip, seperti animate__.

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

• Gunakan Kaedah ikatan JavaScript: Ikat fungsi animasi global pada skop pengendali acara.

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

• Gunakan Kaedah Native animate() Element: Manfaatkan kaedah animate() asli pada elemen sasaran secara langsung.

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

Atas ialah kandungan terperinci Mengapakah Fungsi `animate()` JavaScript Saya Terputus dalam Animasi Web Chrome?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!