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