Sự kiện transitionend
Định nghĩa và cách sử dụng
Sự kiện transitionend xảy ra khi chuyển đổi CSS hoàn thành.
Ghi chú:Nếu chuyển đổi bị xóa trước khi hoàn thành, ví dụ như nếu xóa CSS transition-property Thuộc tính, sẽ không kích hoạt sự kiện transitionend.
Để có thêm kiến thức về hiệu ứng chuyển đổi CSS, hãy học các Hướng dẫn CSS3 hiệu ứng chuyển đổi.
Mô hình
Khi hiệu ứng chuyển đổi CSS kết thúc, hãy làm điều gì đó với phần tử <div> này:
// Mã cho Safari 3.1 đến 6.0
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);
// Cú pháp tiêu chuẩn
document.getElementById("myDIV").addEventListener("transitionend", myFunction);
Cú pháp
object.addEventListener("webkitTransitionEnd", myScript); // Mã cho Safari 3.1 đến 6.0
object.addEventListener("transitionend", myScript); // Cú pháp tiêu chuẩn
Ghi chú:Internet Explorer 8 hoặc các phiên bản sớm hơn không hỗ trợ Phương thức addEventListener().
Chi tiết kỹ thuật
| Bùng nổ: | Hỗ trợ |
|---|---|
| Có thể hủy bỏ: | Hỗ trợ |
| Loại sự kiện: | Sự kiện TransitionEvent |
| Phiên bản DOM: | Level 3 Events |
Hỗ trợ trình duyệt
Số liệu trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ sự kiện này hoàn toàn.
Số liệu sau "webkit", "moz" hoặc "o" chỉ ra phiên bản đầu tiên sử dụng các tiền tố này.
| Sự kiện | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| transitionend | 26.0 4.0 (webkit) |
10.0 | 16.0 4.0 (moz) |
6.1 3.1 (webkit) |
12.1 10.5 (o) |
Trang liên quan
Hướng dẫn CSS: CSS3 hiệu ứng chuyển đổi
Thủ sách tham khảo CSS: Thuộc tính transition CSS3
Tài liệu tham khảo CSS: Thuộc tính transition-property của CSS3
