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