Warum bricht meine JavaScript-Funktion „animate()' in den Webanimationen von Chrome ab?

JS-Funktion animate kann aufgrund von Webanimationen in Chrome kaputt gehen

Dieser JavaScript-Code versucht, ein HTML-Element namens „demo“ durch Änderung zu animieren seine Position und Farbe. In Chrome funktioniert es jedoch nicht.

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

Das Problem

In Chrome liegt das Problem darin, dass die globale Funktion animate() durch eine neue Funktion überschrieben wird Einführung der Methode für den Element-Prototyp in Webanimationen. Dies bedeutet, dass auf die globale Funktion im Rahmen des Event-Handlers nicht mehr zugegriffen werden kann.

Die Lösung

Um dieses Problem zu beheben, ziehen Sie die folgenden Optionen in Betracht:

• Funktion umbenennen: Animate umbenennen, um Konflikte mit der Prototyp-Methode zu vermeiden, z animate__.

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

• Verwenden Sie die Bindemethode von JavaScript: Binden Sie die globale Animationsfunktion an den Bereich des Ereignishandlers.

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

• Verwenden Sie die native animate()-Methode von Element: Nutzen Sie die native animate()-Methode direkt für das Zielelement.

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

Das obige ist der detaillierte Inhalt vonWarum bricht meine JavaScript-Funktion „animate()' in den Webanimationen von Chrome ab?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!