Pourquoi la propriété elapsedTime de l'événement d'animation n'est pas définie

Question

J'essaie d'accéder au elapsedTime propriété des événements d'animation comme indiqué dans MDN.

Lorsque j'inspecte l'objet, je peux voir la propriété avec la valeur correspondante. Cependant, lorsque je le connecte à la console, je ne suis pas défini.Voici l'exemple de code :

HTML

<div id='box'></div>

CSS

#box {
  position:absolute;
  top:0;
  left:0;
  width:50px;
  height:50px;
  background:red;
  animation: move 5s infinite;
}

@keyframes move {
  0% { left: 0; }
  50% { left:90%; }
  100% { left: 0;}
}

JS

$("#box").on("animationiteration webkitAnimationIteration", function (e) {
  console.log(e.elapsedTime); // this logs undefined
});

J'ai installé un violon ici

Answer 1

La syntaxe correcte est

console.log(e.originalEvent.elapsedTime);

Dans l'événement javaScript, la variable est elapsedtime, vous pouvez donc y accéder comme vous l'avez fait

javascriptevent.elapsedTime

Cependant, vous définissez la fonction d'événement dans jQuery.l'événement jQuery met en miroir un grand nombre de variables javascript, mais pas toutes.

Pour accéder aux variables javascript non mises en miroir dans l'événement jQuery, vous disposez du événement original objet, c'est-à-dire l'événement javascript d'origine, à l'intérieur de l'événement jQuery.

La syntaxe est donc

jQueryEvent.originalEvent.elapsedTime

Utilisez la même syntaxe pour accéder à toutes les variables non mises en miroir dans l'événement jQuery

Answer 2

Je l'ai corrigé en ajoutant la ligne de code ci-dessous dans function onAnimationProgress(event) if (ev.elapsedTime === undefined) ev.elapsedTime = maxDuration;