Por que o tempodecorrido propriedade de evento de animação é indefinido

Question

Estou tentando acessar o elapsedTime propriedade de animação de eventos, como mostrado na MDN.

Quando eu inspecionar o objeto que eu possa ver a propriedade com o valor correspondente, no Entanto quando eu fizer logon no console eu estou ficando indefinido.É o seguinte código de exemplo:

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

Eu configuração de um violino aqui

Answer 1

A sintaxe correta é

console.log(e.originalEvent.elapsedTime);

No javaScript evento, a variável é elapsedtime, assim você pode acessá-lo como você fez

javascriptevent.elapsedTime

No entanto, você está definindo a função de eventos em jQuery.o jQuery evento tem um monte de javascript variáveis espelhado, mas não todos.

Para acessar o javascript variáveis não espelhado no fórum do evento, você tem a originalEvent objeto, que é o original de eventos de javascript, dentro do jQuery evento.

Assim, a sintaxe é

jQueryEvent.originalEvent.elapsedTime

Use a mesma sintaxe para acessar todas as variáveis não espelhado no fórum eventos

Answer 2

Eu fixa-lo adicionando a linha de código abaixo function onAnimationProgress(event) if (ev.elapsedTime === undefined) ev.elapsedTime = maxDuration;