حدث الرسوم المتحركة
مثال
افعل شيئًا باستخدام عنصر <div> عندما تنتهي الرسوم المتحركة CSS:
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationEnd", myEndFunction);
// Standard syntax
x.addEventListener("animationend", myEndFunction);
التعريف والاستخدام
يقع حدث الرسوم المتحركة عند اكتمال رسم متحرك CSS.
لمزيد من المعلومات حول CSS Animations ، راجع برنامجنا التعليمي حول CSS3 Animations .
عند تشغيل رسم متحرك CSS ، هناك ثلاثة أحداث يمكن أن تحدث:
- Animationstart - يحدث عند بدء الرسوم المتحركة لـ CSS
- تحريك الرسوم المتحركة - يحدث عند تكرار الرسوم المتحركة لـ CSS
- الرسوم المتحركة - يحدث عند اكتمال الرسوم المتحركة لـ CSS
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الحدث بشكل كامل.
تحدد الأرقام المتبوعة بـ "webkit" أو "moz" الإصدار الأول الذي يعمل مع البادئة.
Event | |||||
---|---|---|---|---|---|
animationend | 4.0 webkit | 10.0 | 16.0 5.0 moz |
4.0 webkit | 15.0 webkit 12.1 |
ملاحظة: بالنسبة لمتصفح Chrome و Safari و Opera ، استخدم بادئة webkitAnimationEnd.
بناء الجملة
object.addEventListener("webkitAnimationEnd", myScript); // Code for Chrome, Safari and Opera
object.addEventListener("animationend", myScript); // Standard syntax
ملاحظة: طريقة addEventListener () غير مدعومة في Internet Explorer 8 والإصدارات السابقة.
تفاصيل تقنية
فقاعات: | نعم |
---|---|
قابل للإلغاء: | رقم |
نوع الحدث: | الرسوم المتحركة |
إصدار DOM: | أحداث المستوى 3 |
الصفحات ذات الصلة
دروس CSS: الرسوم المتحركة CSS3
مرجع CSS: خاصية الرسوم المتحركة CSS3
مرجع DOM HTML: خاصية نمط الرسوم المتحركة