Por qué la propiedad ElapsedTime del evento de animación no está definida

Question

Estoy intentando acceder al elapsedTime propiedad de los eventos de animación como se muestra en MDN.

Cuando inspecciono el objeto puedo ver la propiedad con el valor correspondiente. Sin embargo, cuando lo registro en la consola, no estoy definido.A continuación se muestra el código de muestra:

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
});

He configurado un violín aquí

Answer 1

La sintaxis correcta es

console.log(e.originalEvent.elapsedTime);

En el evento javaScript, la variable es tiempo transcurrido, por lo que puedes acceder a ella como lo hiciste

javascriptevent.tiempo transcurrido

Sin embargo, está configurando la función de evento en jQuery.el evento jQuery tiene muchas variables de JavaScript reflejadas, pero no todas.

Para acceder a las variables javascript no reflejadas en el evento jQuery, tienes la evento original objeto, que es el evento javascript original, dentro del evento jQuery.

Entonces, la sintaxis es

jQueryEvent.originalEvent.tiempo transcurrido

Utilice la misma sintaxis para acceder a todas las variables que no se reflejan en el evento jQuery

Answer 2

Lo arreglé agregando la línea de código a continuación en function onAnimationProgress(event) if (ev.elapsedTime === undefined) ev.elapsedTime = maxDuration;