为什么动画事件的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
});

我已经设置了一个小提琴here

Answer 1

正确的语法是

console.log(e.originalEvent.elapsedTime);

在javaScript事件中，变量是elapsedtime，所以你可以像以前一样访问它

javascriptevent.elapsedTime

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

要访问 jQuery 事件中未镜像的 javascript 变量，您需要 originalEvent 对象，即 jQuery 事件内部的原始 javascript 事件。

所以，语法是

jQueryEvent.originalEvent.elapsedTime

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

Answer 2

我通过在

function onAnimationProgress(event)

中添加下面的代码行来修复它

if (ev.elapsedTime === undefined) ev.elapsedTime = maxDuration;