อ็อบเจ็กต์ TransitionEvent ของ HTML DOM

อ็อบเจ็กต์ TransitionEvent ใน HTML DOM แทนเหตุการณ์ที่เกิดจากการเปลี่ยนผ่าน (transition) ของ CSS

คุณสมบัติและเมธอดของ TransitionEvent

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

ตัวอย่างนี้วัดเวลาที่ใช้ในการ transition เมื่อ hover เมาส์

<!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 เสร็จสิ้น):