animationiteration หน้าเหตุ

DOM 事件 AnimationEvent

การประกาศและการใช้งาน

เหตุการณ์ animationiteration จะเกิดขึ้นเมื่ออนิเมชั่น CSS ทำงานซ้ำ

ถ้า CSS animation-iteration-count คุณสมบัติเมื่อตั้งค่าเป็น "1" หมายความว่า อนิเมชั่น จะเล่นเพียงครั้งเดียว จะไม่เกิดเหตุ animationiteration ขึ้น อนิเมชั่นต้องเล่นหลายครั้งเพื่อที่จะกระตุ้นเหตุการณ์นี้

หากต้องการความรู้เพิ่มเติมเกี่ยวกับอนิเมชั่น CSS โปรดเรียกเรียนต่อคอร์สของเรา CSS3 อนิเมชั่นตูร์。

เมื่อ CSS อนุบาลเล่น อาจมีเหตุการณ์สามตัวที่เกิดขึ้น:

  • animationstart - ระหว่างที่ CSS อนุบาลเริ่ม
  • animationiteration - ระหว่างที่ CSS อนุบาลรูปแบบการวางแผน
  • animationend - ระหว่างที่ CSS อนุบาลเสร็จงาน

ตัวอย่าง

เมื่อ CSS อนุบาลเริ่มรูปแบบการวางแผน ทำอะไรบ้างสำหรับองค์ประกอบ <div> นี้:

var x = document.getElementById("myDIV");
// รหัสสำหรับ Chrome และ Safari รวมถึง Opera
x.addEventListener("webkitAnimationIteration", myRepeatFunction);
// กฎระเบียบมาตรฐาน
x.addEventListener("animationiteration", myRepeatFunction);

ทดลองด้วยตัวเอง

กฎระเบียบ

object.addEventListener("webkitAnimationIteration", myScript);  // รหัสสำหรับ Chrome และ Safari รวมถึง Opera
object.addEventListener("animationiteration", myScript);        // กฎระเบียบมาตรฐาน

หมายเหตุ：Internet Explorer 8 และรุ่นเก่ากว่าไม่สนับสนุน การใช้งานวิธี addEventListener()。

รายละเอียดเทคโนโลยี

การเลื่อนลงเมื่อมีการกดลง สนับสนุน
สามารถยกเลิกได้： ไม่สนับสนุน
ชนิดเหตุการณ์： AnimationEvent
DOM รุ่น： Level 3 Events

การสนับสนุนโปรแกรมนักเขียน

ตัวเลขในตารางชี้ถึงเวอร์ชั่นบราวเซอร์ที่สนับสนุนเหตุการณ์อย่างเต็มที่。

ตัวเลขหลังจาก "webkit" หรือ "moz" ชี้ถึงเวอร์ชั่นหลักที่ใช้คำนำหน้า。

เหตุการณ์ Chrome IE Firefox Safari Opera
animationiteration 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：CSS3 animation คุณสมบัติ

คู่มืออ้างอิง CSS：CSS3 animation-iteration-count คุณสมบัติ

HTML DOM คู่มืออ้างอิง：Style animation คุณสมบัติ

DOM 事件 AnimationEvent