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

Thuộc tính propertyName của TransitionEvent trong HTML DOM trả về một chuỗi tương ứng với thuộc tính CSS được sử dụng cho transition khi một sự kiện transition được kích hoạt.

Cú pháp

Trả về thuộc tính CSS mà transition đã sử dụng:

transitionEvent.propertyName

Ví dụ

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

<!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 = 'Thuộc Tính CSS Dùng Cho Transition: ' + event.propertyName;
    }
    playDisplay.addEventListener("transitionend", getPropertyName);
  </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: