ویژگی elapsedTime رویداد AnimationEvent

رویدادهای DOM AnimationEvent

تعریف و استفاده

ویژگی elapsedTime تعداد ثانیه‌های اجرای انیمیشن را برمی‌گرداند، زمانی که یک رویداد انیمیشن رخ می‌دهد.

نکته:اگر انیمیشن متوقف شود (از طریق استفاده از ویژگی CSS animation-delay)، ارزش بازگشتی تأثیری ندارد.

نکته:برای رویداد animationstart، این ویژگی همیشه "0" را برمی‌گرداند.

نکته:این ویژگی فقط خواندنی است.

مثال

مطمئن شوید که انیمیشن چند ثانیه اجرا شده است:

var x = document.getElementById("myDIV");
x.addEventListener("animationiteration", myRepeatFunction);
function myRepeatFunction(event) {
  this.innerHTML = "Elapsed time: " + event.elapsedTime;
}

خودتان امتحان کنید

نوع دستور زبان

رویداد.elapsedTime

جزئیات فنی

ارائه ارزش: ارزش عددی، نشان‌دهنده ثانیه‌های اجرای انیمیشن است.

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولین مرورگر هستند که از این ویژگی پشتیبانی می‌کند.

ویژگی Chrome IE Firefox Safari Opera
elapsedTime پشتیبانی 10.0 6.0 پشتیبانی پشتیبانی

صفحات مرتبط

دستورالعمل HTML DOM:رویداد animationstart

دستورالعمل HTML DOM:رویداد animationiteration

دستورالعمل HTML DOM:رویداد animationend

دستورالعمل HTML DOM:ویژگی animationName AnimationEvent

دستورالعمل CSS3:ویژگی animation CSS3

دستورالعمل CSS3:ویژگی animation-duration CSS3

رویدادهای DOM AnimationEvent