Pourquoi ma fonction JavaScript `animate()` s'interrompt-elle dans les animations Web de Chrome ?

La fonction JS animée peut être interrompue dans Chrome en raison d'animations Web

Ce code JavaScript tente d'animer un élément HTML nommé « démo » en modifiant sa position et sa couleur. Cependant, cela ne fonctionne pas dans Chrome.

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

Le problème

Dans Chrome, le problème réside dans le fait que la fonction globale animate() est remplacée par un nouveau méthode introduite sur le prototype Element dans les animations Web. Cela signifie que la fonction globale n'est plus accessible dans la portée du gestionnaire d'événements.

La solution

Pour résoudre ce problème, envisagez les options suivantes :

• Renommer la fonction : Renommer animer pour éviter les conflits avec la méthode prototype, comme animate__.

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

• Utilisez la méthode bind de JavaScript : Liez la fonction d'animation globale à la portée du gestionnaire d'événements.

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

• Utilisez la méthode Native animate() d'Element : Tirez parti de la méthode native animate() méthode animate() sur l'élément cible directement.

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!