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

คุณสมบัติ propertyName ของ HTML DOM TransitionEvent ส่งคืน สตริง ที่สอดคล้องกับคุณสมบัติ CSS (CSS property) ที่ใช้ใน transition เมื่อเหตุการณ์ transition ถูกกระตุ้น

ไวยากรณ์ (Syntax)

transitionEvent.propertyName

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

ตัวอย่างนี้แสดงชื่อคุณสมบัติ CSS ที่ถูก transition (ในที่นี้คือ "transform")

<!DOCTYPE html>
<html>
<head>
<title>TransitionEvent propertyName</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-propertyName</legend>
      <div id="playArea"></div>
      <div id="divDisplay"></div>
    </fieldset>
  </form>
<script>
  var divDisplay = document.getElementById("divDisplay");
  var playDisplay = document.getElementById("playArea");
  function getPropertyName(event) {
    divDisplay.textContent = 'CSS Property Used for Transition: '+event.propertyName;
  }
  playDisplay.addEventListener("transitionend", getPropertyName);
</script>
</body>
</html>

ผลลัพธ์ (Output)

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

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