为什么动画事件的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事件中使用originalEvent对象，即原始的javascript事件。

所以，语法是

jQueryEvent.originalEvent.elapsedTime

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

Answer 2

我通过在function onAnimationProgress(event) if (ev.elapsedTime === undefined) ev.elapsedTime = maxDuration;中添加下面的代码行来修正它