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变量，您将在jQuery事件中拥有 originalEvent 对象，即原始javascript事件。

所以，语法是

jQueryEvent.originalEvent.elapsedTime

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

Answer 2

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

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

2 个答案: