Pourquoi la propriété elapsedTime de l'événement d'animation n'est pas définie
-
02-01-2020 - |
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
La solution
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
Autres conseils
Je l'ai corrigé en ajoutant la ligne de code ci-dessous dans function onAnimationProgress(event)
if (ev.elapsedTime === undefined) ev.elapsedTime = maxDuration;