فهم أحداث انتقال CSS3

تسمح انتقالات CSS3 بالرسوم المتحركة السلسة والتأثيرات المرئية على عناصر الويب. لتحسين تجربة المستخدم ومزامنة الإجراءات مع هذه التحولات، من المهم مراقبة تقدمها. تتناول هذه المقالة مسألة ما إذا كان CSS3 يوفر أحداثًا للتحقق من وقت بدء الانتقال أو نهايته.

مسودة انتقالات W3C CSS

تنص مسودة انتقالات W3C CSS على أن يؤدي انتقال CSS إلى تشغيل أحداث DOM المقابلة. لكل خاصية انتقالية، يتم إنشاء حدث. يمكّن هذا المطورين من تنفيذ الإجراءات التي تتزامن مع اكتمال عملية النقل.

WebKit

ضمن WebKit، يتم تشغيل حدث webkitTransitionEnd بمجرد انتهاء عملية النقل. يتيح تعيين مستمع أحداث JavaScript لهذا الحدث للمطورين إمكانية متابعة الإكمال.

box.addEventListener('webkitTransitionEnd', function(event) {
  alert("Finished transition!");
}, false);

Mozilla وOpera وInternet Explorer

فايرفوكس : Transitionend
Opera: oTransitionEnd
WebKit: webkitTransitionEnd
• Internet Explorer: Transitionend
• ]
في Internet Explorer، يتم تشغيل حدث الانتقال فقط عند اكتمال النقل بنجاح؛ تؤدي إزالته قبل الأوان إلى منع تشغيل الحدث.

من خلال الاستفادة من الحدث المناسب استنادًا إلى المتصفح واستخدام مستمعي أحداث JavaScript، يمكن للمطورين مراقبة تقدم انتقالات CSS3 وتنفيذ الإجراءات اللازمة بالتزامن مع اكتمالها.