AnimationEvent trong HTML DOM là một đối tượng trong JavaScript xử lý các sự kiện xảy ra khi animation CSS chạy. Nó cung cấp thông tin về các sự kiện liên quan đến animation. Nó cung cấp kiểm soát tốt hơn đối với CSS animations. Nó đại diện cho mối quan hệ giữa sự kiện và animation bằng cách mô tả sự kiện nào đã kích hoạt animation.
Thuộc tính
Dưới đây là các thuộc tính cho Animation Event:
| Thuộc tính | Mô tả |
|---|---|
| animationName | Trả về tên của animation đang được thực thi. |
| elapsedTime | Trả về thời gian đã trôi qua kể từ khi animation chạy (giây). |
| pseudoElement | Trả về tên của pseudo-element của animation. Vd: ::before, ::after, ::first-line, v.v. |
Cú pháp
Cú pháp cho animationEvent:
animationEvent.property
Ví dụ
Dưới đây là ví dụ cho animationEvent:
<!DOCTYPE html> <html> <head> <style> #ANIM-DIV { margin: 10px; width: 400px; height: 100px; background: lightgreen; position: relative; font-size: 30px; animation-name: animMove; animation-duration: 5s; } @-webkit-keyframes animMove { from {top: 0px;} to {top: 200px;} } </style> </head> <body> <div id="ANIM-DIV"></div> <script> var x = document.getElementById("ANIM-DIV"); x.addEventListener("animationstart", myAnimFunction); function myAnimFunction(event) { this.innerHTML = "Tên animation-name là: " + event.animationName; } </script> </body> </html>
Lưu ý - Ví dụ này được test trên Chrome 74.0.3729.169. Kiểm tra tương thích trình duyệt cho animationEvent.
Kết quả
Sẽ cho kết quả sau:
Sau 5s, phần tử sẽ dịch chuyển xuống:
Giải thích ví dụ:
Chúng ta đã tạo một hộp chữ nhật 400px x 100px bằng cách sử dụng div:
#ANIM-DIV { margin: 10px; width: 400px; height: 100px; background: lightgreen; position: relative; font-size: 30px; animation-name: animMove; animation-duration: 5s; }
Sau đó chỉ định vị trí bắt đầu và kết thúc mà div sẽ di chuyển để tạo animation:
@-webkit-keyframes animMove { from {top: 0px;} to {top: 200px;} }