لماذا الخاصية إيلابسدتيم من الحدث الرسوم المتحركة غير معروف

Question

أحاول الوصول إلى elapsedTime خاصية أحداث الرسوم المتحركة كما هو موضح في شبكة مدن.

عندما أفحص الكائن أستطيع أن أرى الخاصية مع القيمة المقابلة ، ولكن عندما أقوم بتسجيل الدخول في وحدة التحكم أنا الحصول على غير معروف.فيما يلي نموذج التعليمات البرمجية:

أتش تي أم أل

<div id='box'></div>

المغلق

#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;}
}

شبيبة

$("#box").on("animationiteration webkitAnimationIteration", function (e) {
  console.log(e.elapsedTime); // this logs undefined
});

لقد قمت بإعداد كمان هنا

Answer 1

بناء الجملة الصحيح هو

console.log(e.originalEvent.elapsedTime);

في الحدث جافا سكريبت ، المتغير هو إيلاسدتيم ، حتى تتمكن من الوصول إليه كما فعلت

جافاسكريبتيفنت.وقت الفراغ

ومع ذلك ، تقوم بتعيين وظيفة الحدث في مسج.الحدث مسج لديه الكثير من المتغيرات جافا سكريبت معكوسة ، ولكن ليس كل شيء.

للوصول إلى متغيرات جافا سكريبت لا تنعكس في الحدث مسج ، لديك الحدث الأصلي كائن ، وهذا هو الحدث جافا سكريبت الأصلي ، داخل الحدث مسج.

لذلك ، فإن بناء الجملة هو

جكريفنت.الحدث الأصلي.وقت الفراغ

استخدام نفس بناء الجملة للوصول إلى كافة المتغيرات لا تنعكس في الحدث مسج

Answer 2

أنا ثابت عن طريق إضافة سطر من التعليمات البرمجية أدناه في function onAnimationProgress(event) if (ev.elapsedTime === undefined) ev.elapsedTime = maxDuration;