حدث animationend

أحداث DOM AnimationEvent

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

رویداد animationend رخ می‌دهد وقتی CSS آنیماشن تمام شد.

برای اطلاعات بیشتری در مورد CSS آنیماشن، لطفاً دوره‌های ما را مطالعه کنید: درس CSS3 آنیماشن.

سه رویداد ممکن است در زمان پخش CSS آنیماشن رخ دهند:

  • animationstart - وقتی CSS آنیماشن شروع می‌شود رخ می‌دهد
  • animationiteration - وقتی CSS آنیماشن تکرار می‌شود رخ می‌دهد
  • animationend - وقتی CSS آنیماشن تمام شد رخ می‌دهد

مثال

وقتی CSS آніمیشن تمام شد، چند کار را برای عنصر <div> انجام دهید:

var x = document.getElementById("myDIV");
// کد برای Chrome،Safari و Opera
x.addEventListener("webkitAnimationEnd", myEndFunction);
// گرامر استاندارد
x.addEventListener("animationend", myEndFunction);

آزمایش کنید

گرامر

ویدئو.addEventListener("webkitAnimationEnd", myScript);  // کد برای Chrome،Safari و Opera
ویدئو.addEventListener("animationend", myScript);        // گرامر استاندارد

نکته:Internet Explorer 8 و نسخه‌های قبل از آن از آن پشتیبانی نمی‌کنند مетод addEventListener().

جزئیات فنی

بالابردگی: پشتیبانی می‌شود
قابل انصراف: نامشخص
نوع رویداد: AnimationEvent
نسخه DOM: رویدادهای سطح 3

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

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

عدد پس از "webkit" یا "moz" نشان‌دهنده نسخه اولیه استفاده از پیشوند است.

رویداد Chrome IE Firefox Safari Opera
animationend 4.0 webkit 10.0 16.0
5.0 moz		 4.0 webkit 15.0 webkit
12.1

نکته:برای Chrome،Safari و Opera از webkitAnimationEnd استفاده کنید.

صفحات مرتبطه

CSS درس:CSS3 حركة

دليل CSS:خصائص CSS3 animation

دليل HTML DOM:خصائص Style animation

أحداث DOM AnimationEvent