แอนิเมชั่นเอนด์ อีเว้นท์
ตัวอย่าง
ทำบางสิ่งด้วยองค์ประกอบ <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 Animations โปรดดูบทแนะนำเกี่ยวกับ CSS3 Animations
เมื่อภาพเคลื่อนไหว CSS เล่น มีสามเหตุการณ์ที่สามารถเกิดขึ้นได้:
- animationstart - เกิดขึ้นเมื่อภาพเคลื่อนไหว CSS เริ่มต้นขึ้น
- animationiteration - เกิดขึ้นเมื่อภาพเคลื่อนไหว CSS ซ้ำ
- animationend - เกิดขึ้นเมื่อภาพเคลื่อนไหว CSS เสร็จสิ้น
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่รองรับเหตุการณ์อย่างสมบูรณ์
ตัวเลขตามด้วย "webkit" หรือ "moz" ระบุเวอร์ชันแรกที่ทำงานกับคำนำหน้าได้
Event | |||||
---|---|---|---|---|---|
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 และเวอร์ชันก่อนหน้า
รายละเอียดทางเทคนิค
ฟองอากาศ: | ใช่ |
---|---|
ยกเลิกได้: | ไม่ |
ประเภทเหตุการณ์: | แอนิเมชั่นอีเวนท์ |
รุ่น DOM: | กิจกรรมระดับ 3 |
หน้าที่เกี่ยวข้อง
กวดวิชา CSS: ภาพเคลื่อนไหว CSS3
การอ้างอิง CSS: คุณสมบัติภาพเคลื่อนไหว CSS3
การอ้างอิง HTML DOM: คุณสมบัติแอนิเมชั่นสไตล์