Почему истекший свойство анимационного события не определено

Question

Я пытаюсь получить доступ к свойству генеракодицетагкодных событий анимационных событий, как показано в mdn .

Когда я проверю объект, я могу видеть свойство с соответствующим значением, однако, когда я вхожу в систему в консоли, я получаю undefined.Ниже приведен код выборки:

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

.

Я настроил Widdle Здесь

Answer 1

правильный синтаксис

console.log(e.originalEvent.elapsedTime);

.

в событии JavaScript, переменная начнется, поэтому вы можете получить доступ к нему, как вы сделали

JavaScriptevent.elapsedteTime

Однако вы устанавливаете функцию события в jQuery.Мероприятие jQuery имеет много переменных JavaScript, но не все.

Чтобы получить доступ к переменным JavaScript, не зеркальным в событии jQuery, у вас есть объект OriginalEvent , то есть исходное событие JavaScript внутри события jQuery.

Итак, синтаксис

jqueryevent.originalEvent.elapsedtimetime

Используйте тот же синтаксис для доступа к всем переменным, не зеркальным в событии jQuery

Answer 2

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