Почему истекший свойство анимационного события не определено
-
02-01-2020 - |
Вопрос
Я пытаюсь получить доступ к свойству генеракодицетагкодных событий анимационных событий, как показано в 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 Здесь
Решение
правильный синтаксис
console.log(e.originalEvent.elapsedTime);
.
в событии JavaScript, переменная начнется, поэтому вы можете получить доступ к нему, как вы сделали
JavaScriptevent.elapsedteTime
Однако вы устанавливаете функцию события в jQuery.Мероприятие jQuery имеет много переменных JavaScript, но не все.
Чтобы получить доступ к переменным JavaScript, не зеркальным в событии jQuery, у вас есть объект OriginalEvent , то есть исходное событие JavaScript внутри события jQuery.
Итак, синтаксис
jqueryevent.originalEvent.elapsedtimetime
Используйте тот же синтаксис для доступа к всем переменным, не зеркальным в событии jQuery
Другие советы
I fixed it by adding the line of code below in function onAnimationProgress(event)
if (ev.elapsedTime === undefined) ev.elapsedTime = maxDuration;