แอนิเมชั่นเหตุการณ์ที่ล่วงเลยเวลาคุณสมบัติ
ตัวอย่าง
ค้นหาว่าแอนิเมชั่นวิ่งไปกี่วินาที:
var x = document.getElementById("myDIV");
x.addEventListener("animationiteration", myRepeatFunction);
function myRepeatFunction(event) {
this.innerHTML = "Elapsed time: " + event.elapsedTime;
}
ความหมายและการใช้งาน
คุณสมบัติ elapsedTime ส่งกลับจำนวนวินาทีที่แอนิเมชั่นทำงาน เมื่อมีเหตุการณ์แอนิเมชั่นเกิดขึ้น
หมายเหตุ:ค่าส่งคืนจะไม่ได้รับผลกระทบหากภาพเคลื่อนไหวถูกหยุดชั่วคราว (โดยใช้คุณสมบัติ CSS ของภาพเคลื่อนไหวล่าช้า)
หมายเหตุ:สำหรับ เหตุการณ์ animationstartคุณสมบัตินี้จะส่งคืน "0" เสมอ
คุณสมบัตินี้เป็นแบบอ่านอย่างเดียว
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
Property | |||||
---|---|---|---|---|---|
elapsedTime | Yes | 10.0 | 6.0 | Yes | Yes |
ไวยากรณ์
event.elapsedTime
รายละเอียดทางเทคนิค
คืนมูลค่า: | ตัวเลข แทนจำนวนวินาทีที่แอนิเมชันทำงานอยู่ |
---|
หน้าที่เกี่ยวข้อง
การอ้างอิง HTML DOM: เหตุการณ์ animationstart
การอ้างอิง HTML DOM: เหตุการณ์การวนซ้ำแอนิเมชั่น
การอ้างอิง HTML DOM: The animationend Event
การอ้างอิง HTML DOM: AnimationEvent animationName Property
การอ้างอิง CSS: คุณสมบัติภาพเคลื่อนไหว CSS3
การอ้างอิง CSS: CSS3 ภาพเคลื่อนไหว-ระยะเวลา คุณสมบัติ