เหตุการณ์เปลี่ยนผ่าน
ตัวอย่าง
ทำบางสิ่งด้วยองค์ประกอบ <div> เมื่อการเปลี่ยน CSS สิ้นสุดลง:
// Code for Safari 3.1 to 6.0
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);
// Standard syntax
document.getElementById("myDIV").addEventListener("transitionend", myFunction);
ความหมายและการใช้งาน
เหตุการณ์การเปลี่ยนผ่านเกิดขึ้นเมื่อการเปลี่ยน CSS เสร็จสิ้น
หมายเหตุ:ถ้าการเปลี่ยนแปลงถูกลบออกก่อนที่จะเสร็จสิ้น เช่น ถ้าคุณสมบัติการเปลี่ยนแปลงคุณสมบัติ CSS ถูกลบ เหตุการณ์การเปลี่ยนภาพจะไม่เริ่มทำงาน
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการเปลี่ยน CSS โปรดดูบทแนะนำเกี่ยวกับการ เปลี่ยนCSS3
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่รองรับเหตุการณ์อย่างสมบูรณ์
ตัวเลขตามด้วย "webkit", "moz" หรือ "o" ระบุเวอร์ชันแรกที่ใช้งานได้กับคำนำหน้า
Event | |||||
---|---|---|---|---|---|
transitionend | 26.0 4.0 (webkitTransitionEnd) |
10.0 | 16.0 4.0 (mozTransitionEnd) |
6.1 3.1 (webkitTransitionEnd) |
12.1 10.5 (oTransitionEnd) |
ไวยากรณ์
object.addEventListener("webkitTransitionEnd", myScript); // Code for Safari 3.1 to 6.0
object.addEventListener("transitionend", myScript); // Standard syntax
หมายเหตุ:วิธีการaddEventListener()ไม่ได้รับการสนับสนุนใน Internet Explorer 8 และเวอร์ชันก่อนหน้า
รายละเอียดทางเทคนิค
ฟองอากาศ: | ใช่ |
---|---|
ยกเลิกได้: | ใช่ |
ประเภทเหตุการณ์: | TransitionEvent |
รุ่น DOM: | กิจกรรมระดับ 3 |
หน้าที่เกี่ยวข้อง
บทช่วยสอน CSS: การเปลี่ยน CSS3
การอ้างอิง CSS: คุณสมบัติการเปลี่ยนแปลง CSS3
การอ้างอิง CSS: คุณสมบัติการเปลี่ยนแปลงคุณสมบัติ CSS3