رویداد transitionend

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

رویداد transitionend در زمان پایان تبدیل CSS رخ می‌دهد.

نکته:اگر تبدیل قبل از اتمام حذف شود، به عنوان مثال اگر CSS transition-property اگر属性، رویداد transitionend را فعال نمی‌کند.

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

مثال

وقتی که CSS گذر به پایان رسید، کاری را برای عنصر <div> انجام دهید:

// کد برای Safari 3.1 تا 6.0
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);
// گرامر استاندارد
document.getElementById("myDIV").addEventListener("transitionend", myFunction);

تست کنید

گرامر

object.addEventListener("webkitTransitionEnd", myScript);  // کد برای Safari 3.1 تا 6.0
object.addEventListener("transitionend", myScript);        // گرامر استاندارد

نکته:اینترنت اکسپلورر 8 یا نسخه‌های قدیمی‌تر آن از این متد پشتیبانی نمی‌کند. متد addEventListener().

جزئیات فنی

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

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

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

عدد بعد از "webkit"، "moz" یا "o" مشخص می‌کند که از چه نسخه‌ای از پیشوند استفاده می‌شود.

رویداد Chrome IE Firefox Safari Opera
transitionend 26.0
4.0 (webkit)
10.0 16.0
4.0 (moz)
6.1
3.1 (webkit)
12.1
10.5 (o)

مستندات مرتبط

CSS درس: CSS3 گذر

CSS رجوع کتاب: CSS3 transition属性

CSS ਸੰਦਰਭ ਦਸਤਾਵੇਜ਼: CSS3 transition-property ਪ੍ਰਤੀਯੋਗਿਤਾ ਵਿਸ਼ੇਸ਼ਤਾ