Por qué la propiedad ElapsedTime del evento de animación no está definida
-
02-01-2020 - |
Pregunta
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í
Solución
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
Otros consejos
Lo arreglé agregando la línea de código a continuación en function onAnimationProgress(event)
if (ev.elapsedTime === undefined) ev.elapsedTime = maxDuration;