คุณสมบัติ elapsedTime ของ HTML DOM TransitionEvent

คุณสมบัติ elapsedTime ของ HTML DOM TransitionEvent ส่งคืน ตัวเลข ที่สอดคล้องกับจำนวนวินาทีที่ transition ทำงานไปแล้ว เมื่อเหตุการณ์ transition ถูกกระตุ้น (เช่น transitionend)

ไวยากรณ์ (Syntax)

transitionEvent.elapsedTime

ตัวอย่างการใช้งาน

ตัวอย่างเดียวกับ TransitionEvent Object (บทความก่อนหน้า) แสดงการใช้ elapsedTime วัดระยะเวลา transition

<!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 = 'Elapsed Time in Transition: '+event.elapsedTime+' seconds';
  }
  playDisplay.addEventListener("transitionend", getElapsedTime);
</script>
</body>
</html>

ผลลัพธ์ (Output)

ก่อน hover เมาส์เหนือวงกลม:

หลัง hover เมาส์เหนือวงกลม (transition เสร็จสิ้น):