Animationイベントの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
});

.

私はフィドルを設定しましたこちら

Answer 1

正しい構文は

です

console.log(e.originalEvent.elapsedTime);

.

JavaScriptイベントでは、変数が経過するので、

のようにアクセスできます。

javascriptevent.elapsedTime

しかし、jQueryでイベント機能を設定しています。jQueryイベントには、Mirroredが多数のJavaScript変数が多数ありますが、すべてがありません。

jQueryイベントでミラー化されていないJavaScript変数にアクセスするには、 originalEvent オブジェクト、つまりjQueryイベントの中のオリジナルの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;