رویداد transitionend

رویدادهای DOM رویداد TransitionEvent

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

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

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

برای اطلاعات بیشتری در مورد انتقال CSS، لطفاً دوره‌های ما را مطالعه کنید: آموزش CSS3 Transition.

مثال

وقتی که انتقال 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 یا قبل از آن از Internet Explorer پشتیبانی نمی‌کنند مетод 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: ویژگی transition CSS3

دستورالعمل CSS: ویژگی transition-property CSS3

رویدادهای DOM رویداد TransitionEvent