Perché la proprietà passata dell'evento di animazione è indefinita

Question

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

Answer 1

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

Answer 2

I fixed it by adding the line of code below in function onAnimationProgress(event) if (ev.elapsedTime === undefined) ev.elapsedTime = maxDuration;