Thuộc tính elapsedTime của TransitionEvent trong HTML DOM

Thuộc tính elapsedTime của TransitionEvent trong HTML DOM trả về một số tương ứng với số giây một transition đã chạy khi một sự kiện transition được kích hoạt.

Cú pháp

Trả về số giây transition đã chạy:

transitionEvent.elapsedTime

Ví dụ

Dưới đây là ví dụ minh họa thuộc tính TransitionEvent elapsedTime:

<!DOCTYPE html>
<html>
<head>
  <title>TransitionEvent elapsedTime</title>
  <style>
    form { width: 70%; margin: 0 auto; text-align: center; }
    * { padding: 2px; margin: 5px; }
    input[type="button"] { border-radius: 10px; }
    #playArea { display: inline-block; border-radius: 50%; background-color: #DC3545; width: 50px; height: 50px; border: 3px solid #AC3509; transition: all 1.3s ease; }
    #playArea:hover { transform: translateX(80px); }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>TransitionEvent-elapsedTime</legend>
      <div id="playArea"></div>
      <div id="divDisplay"></div>
    </fieldset>
  </form>
  <script>
    var divDisplay = document.getElementById("divDisplay");
    var playDisplay = document.getElementById("playArea");
    function getElapsedTime(event) {
      divDisplay.textContent = 'Thời Gian Chuyển Tiếp: ' + event.elapsedTime + ' giây';
    }
    playDisplay.addEventListener("transitionend", getElapsedTime);
  </script>
</body>
</html>

Kết quả

Trước khi di chuột qua phần tử div:

Sau khi di chuột qua phần tử div: