Por que o tempodecorrido propriedade de evento de animação é indefinido
-
02-01-2020 - |
Pergunta
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
Solução
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
Outras dicas
Eu fixa-lo adicionando a linha de código abaixo function onAnimationProgress(event)
if (ev.elapsedTime === undefined) ev.elapsedTime = maxDuration;