animationstart 事件

DOM 事件 AnimationEvent

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

وقتی CSS آنیماشن شروع به پخش می‌شود، رویداد animationstart رخ می‌دهد.

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

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

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

مثال

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

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

آزمایش کنید

گرامر

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

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

جزئیات فنی

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

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

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

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

رویداد Chrome IE Firefox Safari Opera
animationstart 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