Sự kiện chuyển tiếp
Thí dụ
Làm đ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);
Định nghĩa và Cách sử dụng
Sự kiện chuyển tiếp 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 CSS chuyển tiếp-thuộc tính bị xóa, thì sự kiện chuyển tiếp sẽ không kích hoạt.
Để biết thêm thông tin về Chuyển đổi CSS, hãy xem hướng dẫn của chúng tôi về Chuyển đổi CSS3 .
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", "moz" hoặc "o" chỉ định phiên bản đầu tiên hoạt động với tiền tố.
Event | |||||
---|---|---|---|---|---|
transitionend | 26.0 4.0 (webkitTransitionEnd) |
10.0 | 16.0 4.0 (mozTransitionEnd) |
6.1 3.1 (webkitTransitionEnd) |
12.1 10.5 (oTransitionEnd) |
Cú pháp
object.addEventListener("webkitTransitionEnd", myScript); // Code for Safari 3.1 to 6.0
object.addEventListener("transitionend", 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ỏ: | Đúng |
Loại sự kiện: | TransitionEvent |
Phiên bản DOM: | Sự kiện cấp 3 |
Các 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 chiếu CSS: Thuộc tính chuyển tiếp CSS3