sự kiện hoạt hình
Thí dụ
Làm điều gì đó với phần tử <div> khi hoạt ảnh CSS kết thúc:
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationEnd", myEndFunction);
// Standard syntax
x.addEventListener("animationend", myEndFunction);
Định nghĩa và Cách sử dụng
Sự kiện animationend xảy ra khi hoạt ảnh CSS đã hoàn thành.
Để biết thêm thông tin về CSS Animations, hãy xem hướng dẫn của chúng tôi về CSS3 Animations .
Khi hoạt ảnh CSS phát, có ba sự kiện có thể xảy ra:
- animationstart - xảy ra khi hoạt ảnh CSS đã bắt đầu
- hoạt ảnh - xảy ra khi hoạt ảnh CSS được lặp lại
- animationend - xảy ra khi hoạt ảnh CSS đã hoàn thành
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ sự kiện.
Các số theo sau là "webkit" hoặc "moz" chỉ định phiên bản đầu tiên hoạt động với tiền tố.
Event | |||||
---|---|---|---|---|---|
animationend | 4.0 webkit | 10.0 | 16.0 5.0 moz |
4.0 webkit | 15.0 webkit 12.1 |
Lưu ý: Đối với Chrome, Safari và Opera, hãy sử dụng tiền tố webkitAnimationEnd.
Cú pháp
object.addEventListener("webkitAnimationEnd", myScript); // Code for Chrome, Safari and Opera
object.addEventListener("animationend", myScript); // Standard syntax
Lưu ý: Phương thức addEventListener () không được hỗ trợ trong Internet Explorer 8 và các phiên bản trước đó.
Chi tiết kỹ thuật
Bong bóng: | Đúng |
---|---|
Có thể hủy bỏ: | Không |
Loại sự kiện: | AnimationEvent |
Phiên bản DOM: | Sự kiện cấp 3 |
Các trang liên quan
Hướng dẫn CSS: Hình ảnh động CSS3
Tham chiếu CSS: Thuộc tính hoạt ảnh CSS3
Tham chiếu DOM HTML: Thuộc tính hoạt hình kiểu