sự kiện chuyển tiếp
Ví dụ
Thực hiện điều gì đó với phần tử <div> khi quá trình chuyển đổi CSS kết thúc:
// Code for Safari 3.1 to 6.0
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);
// Standard syntax
document.getElementById("myDIV").addEventListener("transitionend", myFunction);
Hãy tự mình thử »Sự miêu tả
Sự kiện transitionend xảy ra khi quá trình chuyển đổi CSS hoàn tất.
Lưu ý: Nếu quá trình chuyển đổi bị xóa trước khi hoàn thành, ví dụ: nếu thuộc tính thuộc tính chuyển tiếp CSS bị xóa, sự kiện chuyển tiếp sẽ không kích hoạt.
Để biết thêm thông tin về Chuyển tiếp CSS, hãy xem hướng dẫn của chúng tôi về Chuyển tiếp CSS3 .
Cú pháp
object.addEventListener("webkitTransitionEnd", myScript ); // Code for Safari 3.1 to 6.0
object .addEventListener("transitionend", myScript ); // Standard syntax
Chi tiết kỹ thuật
Bong bóng: | Đúng |
---|---|
Có thể hủy: | Đúng |
Loại sự kiện: | Sự kiện chuyển tiếp |
Phiên bản DOM: | Sự kiện cấp 3 |
Trang liên quan
Hướng dẫn CSS: Chuyển tiếp CSS3
Tham khảo CSS: Thuộc tính chuyển tiếp CSS3
Tham khảo CSS: Thuộc tính chuyển tiếp CSS3
Hỗ trợ trình duyệt
event.transitionEnd
là tính năng của DOM Cấp 3 (2004).
Nó được hỗ trợ đầy đủ trong tất cả các trình duyệt hiện đại:
Chrome | Edge | Firefox | Safari | Opera | IE |
Yes | Yes | Yes | Yes | Yes | 11 |