Javascript DOM TransitionEvent elapsedTime Property

Introduction

Find out how many seconds a transition has been running.

Hover over the div element below, and wait for the transition effect to end.

The elapsedTime property returns the number of seconds the transition effect has been running.

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {// w  w w  .  j a  va2  s.co  m
  width: 100px;
  height: 100px;
  background: yellow;
  -webkit-transition: 2s; /* For Safari 3.1 to 6.0 */
  transition: 2s;
}

#myDIV:hover {
  width: 400px;
}
</style>
</head>
<body>
<div id="myDIV"></div>
<script>
// Code for Safari 3.1 to 6.0
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);

// Standard syntax
document.getElementById("myDIV").addEventListener("transitionend", myFunction);

function myFunction(event) {
  this.innerHTML = "Transition lasted: " + event.elapsedTime + " seconds";
}
</script>

</body>
</html>

The elapsedTime property returns the number of seconds a transition has been running.

The return value is not affected if the transition is paused.

This property is read-only.




PreviousNext

Related