เหตุการณ์ transitionend

เหตุการณ์ DOM TransitionEvent

คำอธิบายและการใช้งาน

เหตุการณ์ 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);        // การใช้งานมาตรฐาน

หมายเหตุ:Internet Explorer 8 หรือตัวเวอร์ชั่นเก่ากว่านั้นไม่สนับสนุน addEventListener() วิธี.

รายละเอียดเทคนิค

ฉับเคือง: สนับสนุน
ยกเลิกได้: สนับสนุน
ประเภทเหตุการณ์: TransitionEvent
DOM รุ่น: Level 3 Events

การสนับสนุนบราวเซอร์

ตัวเลขในตารางบอกว่าเวอร์ชั่นบราวเซอร์แรกที่สนับสนุนเหตุการณ์นี้

ตัวเลขที่มีหลักฐาน "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: คุณสมบัติ transition-property ของ CSS3

เหตุการณ์ DOM TransitionEvent