Đối tượng TransitionEvent trong HTML DOM đại diện cho một sự kiện xảy ra khi một hiệu ứng chuyển tiếp (transition) diễn ra.
Đối tượng "TransitionEvent" có thể có các thuộc tính và phương thức sau:
| Thuộc tính/Phương thức | Mô tả |
|---|---|
| propertyName | Trả về một chuỗi tương ứng với thuộc tính CSS được sử dụng cho transition khi sự kiện transition được kích hoạt |
| elapsedTime | Trả về một số tương ứng với số giây transition đã chạy khi sự kiện transition được kích hoạt |
| pseudoElement | Trả về tên của pseudo-element của transition |
Ví dụ
Dưới đây là ví dụ minh họa thuộc tính TransitionEvent elapsedTime:
<!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 = 'Thời Gian Chuyển Tiếp: ' + event.elapsedTime + ' giây';
}
playDisplay.addEventListener("transitionend", getElapsedTime);
</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:
