ตัวอย่าง
ทำอะไรบางอย่างกับ <div> องค์ประกอบเมื่อภาพเคลื่อนไหว CSS ได้สิ้นสุด:
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationEnd", myEndFunction);
//
Standard syntax
x.addEventListener("animationend", myEndFunction); ลองตัวเอง» ความหมายและการใช้งาน
เหตุการณ์ที่เกิดขึ้นเมื่อ animationend ภาพเคลื่อนไหว CSS ได้เสร็จสิ้น
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับแอนิเมชั่ CSS ดูกวดวิชาของเราใน CSS3 ภาพเคลื่อนไหว
เมื่อมีการเคลื่อนไหว CSS เล่นมีสามเหตุการณ์ที่อาจเกิดขึ้น:
- animationstart - เกิดขึ้นเมื่อ CSS นิเมชั่นได้เริ่มต้น
- animationiteration - เกิดขึ้นเมื่อ CSS เคลื่อนไหวซ้ำแล้วซ้ำอีก
- animationend - เกิดขึ้นเมื่อแอนิเมชั่ CSS ได้เสร็จสิ้น
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่เหตุการณ์
เบอร์ตามมาด้วย "webkit" หรือ "moz" ระบุรุ่นแรกที่ทำงานร่วมกับคำนำหน้า
| เหตุการณ์ | |||||
|---|---|---|---|---|---|
| animationend | 4.0 WebKit | 10.0 | 16.0 5.0 moz | 4.0 WebKit | 15.0 WebKit 12.1 |
หมายเหตุ: สำหรับ Chrome, Safari และ Opera ใช้คำนำหน้า webkitAnimationEnd
วากยสัมพันธ์
object.addEventListener("webkitAnimationEnd", myScript );
// Code for Chrome, Safari and Opera
object .addEventListener("animationend", myScript );
// Standard syntax
หมายเหตุ: addEventListener() วิธีการที่ไม่ได้รับการสนับสนุนใน Internet Explorer 8 และรุ่นก่อนหน้านี้
รายละเอียดทางเทคนิค
| บับเบิ้ล: | ใช่ |
|---|---|
| ยกเลิก: | ไม่ |
| ประเภทเหตุการณ์: | AnimationEvent |
| DOM เวอร์ชัน: | ระดับที่ 3 เหตุการณ์ |
หน้าเว็บที่เกี่ยวข้อง
สอน CSS: CSS3 ภาพเคลื่อนไหว
CSS อ้างอิง: CSS3 animation Property
HTML DOM อ้างอิง: Style animation Property
<object เหตุการณ์