مثل animationiteration الحدث
تعريف والاستخدام
يحدث حدث animationiteration عند تكرار تأثير CSS.
إذا مثل CSS animation-iteration-count الخاصيةإذا تم تعيينه على "1"، فإنه يعني أن التحريك سيشغل مرة واحدة فقط و لن يحدث حدث animationiteration. يجب تشغيل التحريك عدة مرات لتنشيط هذا الحدث.
للحصول على معلومات أكثر حول تأثير CSS، يرجى متابعة تدريس تأثير CSS3.
عندما تُعرض CSS من الحركة، قد تحدث ثلاثة أحداث:
- animationstart - يحدث عند بدء CSS من الحركة
- animationiteration - يحدث عند تكرار CSS من الحركة
- animationend - يحدث عند اكتمال CSS من الحركة
مثال
عندما تنتهي CSS من الحركة، قم بفعل شيء مع عنصر <div>:
var x = document.getElementById("myDIV"); // للـ Chrome و Safari و Opera x.addEventListener("webkitAnimationIteration", myRepeatFunction); // بناء جملة معيارية x.addEventListener("animationiteration", myRepeatFunction);
اللغة
الجسم.addEventListener("webkitAnimationIteration", myScript); // للـ Chrome و Safari و Opera الجسم.addEventListener("animationiteration", myScript); // بناء جملة معيارية
التعليقات:Internet Explorer 8 أو الأقدم لا يدعم طريقة addEventListener().
تفاصيل تقنية
تدفق الارتفاع: | مدعوم |
---|---|
قابل للإلغاء: | غير مدعوم |
نوع الحدث: | مثل AnimationEvent |
إصدار DOM: | حوادث المستوى 3 |
دعم المتصفح
الرقم في الجدول يشير إلى إصدار المتصفح الذي يدعم الحدث بشكل كامل.
الرقم الذي يليه "webkit" أو "moz" يشير إلى الإصدار الأول الذي يتم استخدامه مع المقدمة.
حدث | Chrome | IE | Firefox | Safari | Opera |
---|---|---|---|---|---|
animationiteration | 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:خصائص animation في CSS3
دليل CSS:خصائص animation-iteration-count في CSS3
دليل HTML DOM:مثل Style animation الخاصية