Perché la proprietà passata dell'evento di animazione è indefinita
-
02-01-2020 - |
Domanda
Sto cercando di accedere alla proprietà elapsedTime
di eventi di animazione come mostrato in MDN .
Quando ispezionando l'oggetto che posso vedere la proprietà con il valore corrispondente, tuttavia quando l'ho registrato in console, non sto diventando indefinito.Di seguito è riportato il codice di esempio:
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
});
.
Ho configurato un violino qui
Soluzione
La sintassi corretta è
console.log(e.originalEvent.elapsedTime);
.
Nell'evento JavaScript, la variabile è passata, quindi è possibile accedervi come hai
javascriptevent.elapsedtime
Tuttavia, stai impostando la funzione evento in jQuery.L'evento JQuery ha molte variabili JavaScript rispecchiate, ma non tutte.
Per accedere alle variabili JavaScript non rispecchiate nell'evento jQuery, hai l'oggetto OriginalEvent , ovvero l'evento JavaScript originale, all'interno dell'evento JQuery.
Quindi, la sintassi è
jqueryevent.originalvent.elapsedtime
Utilizzare la stessa sintassi per accedere a tutte le variabili non rispecchiate nell'evento jQuery
Altri suggerimenti
I fixed it by adding the line of code below in function onAnimationProgress(event)
if (ev.elapsedTime === undefined) ev.elapsedTime = maxDuration;