为什么动画事件的Elapsedtime属性未定义

Question

我正在尝试访问动画事件的elapsedTime属性，如 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
});

.

我已经设置了一个小提琴

Answer 1

正确的语法是

console.log(e.originalEvent.elapsedTime);

.

在JavaScript事件中，变量是闪烁的时间，因此您可以按照您的方式访问它，以

javascriptevent.elapsedtime

但是，您正在将事件函数设置为jQuery。jQuery事件有很多JavaScript变量镜像，但不是全部。

要访问在jQuery事件中未映像的JavaScript变量，您可以在jQuery事件中具有 OricalialEvent 对象，即原始JavaScript事件。

所以，语法是

jqueryevent.originalevent.elapsedtime

使用相同的语法来访问jQuery事件中未镜像的所有变量

Answer 2

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