HTML DOM AnimationEvent

HTML DOM AnimationEvent là một đối tượng trong JavaScript xử lý các sự kiện xảy ra khi hoạt ảnh CSS chạy. Về cơ bản, nó cung cấp cho chúng ta thông tin về các sự kiện có liên quan đến hoạt ảnh. Nó cung cấp cho chúng tôi khả năng kiểm soát tốt hơn đối với các hoạt ảnh CSS. Nó thể hiện mối quan hệ giữa các sự kiện và hoạt ảnh bằng cách mô tả sự kiện nào đã kích hoạt hoạt ảnh.

Thuộc tính

Sau đây là các thuộc tính cho Sự kiện hoạt ảnh -

Thuộc tính	Mô tả
animationName	Nó sẽ trả về tên của hoạt ảnh đang được thực thi.
ElapsedTime	Trả về thời gian đã trôi qua kể từ khi hoạt ảnh chạy tính bằng giây.
pseudoElement	Nó trả về tên của phần tử giả của hoạt ảnh. Ví dụ:::before, ::after, ::first-line, v.v.

Cú pháp

Sau đây là cú pháp cho animationEvent -

animationEvent.property

Ví dụ

Hãy để chúng tôi xem một 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 = "The animation-name is: " + event.animationName;
   }
</script>
</body>
</html>

Lưu ý - Điều này đã được thử nghiệm trên chrome 74.0.3729.169. Hãy kiểm tra khả năng tương thích của trình duyệt đối với animationEvent.

Đầu ra

Nó sẽ tạo ra kết quả sau -

HTML DOM AnimationEvent

Sau 5 giây, phần tử sẽ dịch chuyển xuống dưới -

HTML DOM AnimationEvent

Trong ví dụ trên -

Chúng tôi đã tạo một hình 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úng tôi đã chỉ định vị trí bắt đầu và kết thúc mà giữa div sẽ chuyển sang hoạt ảnh -

@-webkit-keyframes animMove {
   from {top: 0px;}
   to {top: 200px;}
}