animationend الحدث

مثال

تفعل شيئا مع <div> العنصر عندما الرسوم المتحركة CSS قد انتهت:

var x = document.getElementById("myDIV");

// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationEnd", myEndFunction);

// Standard syntax
x.addEventListener("animationend", myEndFunction);

انها محاولة لنفسك »

تعريف والاستخدام

يحدث هذا الحدث animationend عند اكتمال الرسوم المتحركة CSS.

لمزيد من المعلومات حول CSS متحركة، انظر البرنامج التعليمي لدينا على CSS3 متحركة .

عندما يلعب الرسوم المتحركة CSS، وهناك ثلاثة أحداث التي يمكن أن تحدث:

animationstart يحدث عندما بدأت الرسوم المتحركة CSS -
animationiteration يحدث عندما يتم تكرار الرسوم المتحركة CSS -
يحدث عند اكتمال الرسوم المتحركة CSS - animationend

دعم المتصفح

الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل الحدث.

أرقام تليها "webkit" أو "moz" تحدد النسخة الأولى التي عملت مع بادئة.

هدف
animationend	4.0 بكت	10.0	16.0 5.0 MOZ	4.0 بكت	15.0 بكت 12.1

ملاحظة: للحصول على كروم وسفاري وأوبرا، استخدام بادئة webkitAnimationEnd.

بناء الجملة

object.addEventListener("webkitAnimationEnd", myScript ); // Code for Chrome, Safari and Opera
object .addEventListener("animationend", myScript ); // Standard syntax

ملاحظة: addEventListener() لا يتم اعتماد طريقة في Internet Explorer 8 والإصدارات السابقة.