Thuộc tính HTML DOM TransitionEvent propertyName trả về một chuỗi tương ứng với một thuộc tính CSS được sử dụng để chuyển đổi khi một sự kiện chuyển đổi được kích hoạt.
Sau đây là cú pháp -
Trả lại thuộc tính CSS mà quá trình chuyển đổi đã sử dụng -
transitionEvent.propertyName
Hãy để chúng tôi xem một ví dụ về TransitionEvent propertyName tài sản -
Ví dụ
<!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> Đầu ra
Trước khi di chuột qua phần tử div -
Sau khi di chuột qua phần tử div -
