ตัวอย่าง
ทำอะไรบางอย่างกับ <div> องค์ประกอบเมื่อมีการเปลี่ยนแปลง CSS ได้สิ้นสุด:
// Code for Safari 3.1 to 6.0
document.getElementById("myDIV").addEventListener("webkitTransitionEnd",
myFunction);
// Standard syntax
document.getElementById("myDIV").addEventListener("transitionend",
myFunction); ลองตัวเอง» ความหมายและการใช้งาน
เหตุการณ์ transitionend เกิดขึ้นเมื่อมีการเปลี่ยนแปลง CSS ได้เสร็จสิ้น
หมายเหตุ: หากเปลี่ยนแปลงจะถูกลบออกก่อนครบเช่นถ้าแบบ CSS การเปลี่ยนแปลงสถานที่ให้บริการ สถานที่ให้บริการจะถูกลบออกเหตุการณ์ transitionend จะไม่ยิง
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ CSS เปลี่ยนให้ดูที่การกวดวิชาของเราใน CSS3 Transitions
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่เหตุการณ์
ตัวเลขตามด้วย "WebKit", "MOZ" หรือ "O" ระบุรุ่นแรกที่ทำงานร่วมกับคำนำหน้า
| เหตุการณ์ | |||||
|---|---|---|---|---|---|
| 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 Transitions
CSS อ้างอิง: CSS3 การเปลี่ยนแปลงสถานที่ให้บริการ
CSS อ้างอิง: CSS3 ทรัพย์สินสถานที่ให้บริการการเปลี่ยนแปลง
วัตถุที่จัดกิจกรรม