왜 애니메이션 이벤트의 ElapsedTime 속성이 정의되지 않은 이유는 무엇입니까?

Question

mdn .

오브젝트를 검사 할 때 해당 값이있는 속성을 볼 수 있지만 콘솔에 로그인하면 정의되지 않습니다.다음은 샘플 코드입니다.

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

.

fiddle 여기

Answer 1

올바른 구문은

입니다.

console.log(e.originalEvent.elapsedTime);

.

JavaScript 이벤트에서 변수는 ElapsedTime이므로

로 액세스 할 수 있습니다.

JavaScriptEvent.ElapsedTime

그러나 jQuery에서 이벤트 기능을 설정하고 있습니다.jQuery 이벤트에는 JavaScript 변수가 미러링되지만 전부는 아닙니다.

jQuery 이벤트에서 미러링되지 않은 JavaScript 변수에 액세스하려면 origionEvent 객체가 jQuery 이벤트 내부의 원래 JavaScript 이벤트입니다.

그래서 구문은

jqueryEvent.originalEvent.ElapsTime

동일한 구문을 사용하여 jQuery 이벤트에서 미러링되지 않은 모든 변수에 액세스합니다

Answer 2

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