HTML | DOM TransitionEvent elapsedTime Property
The TransitionEvent elapsedTime property is used for returning the number of seconds for which a transition has been running when a transitionend event occurs.
The TransitionEvent elapsedTime property is read-only property.
Syntax :
event.elapsedTime
Return Value: It returns a number which represents the number of seconds for which a transition has been running.
Below program illustrates the TransitionEvent elapsedTime property :
Example: Finding out the number of seconds for which a transition has been running.
<!DOCTYPE html> <html> <head> <title>TransitionEvent elapsedTime Property </title> <style> #div1 { width: 100px; height: 20px; background: green; transition: 3s; } #div1:hover { width: 300px; } h1 { color: green; } h2 { font-family: Impact; } body { text-align: center; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2>TransitionEvent elapsedTime Property</h2> <p>Hover over the element to see the number of seconds the transition effect has been running. </p> <div id="div1"></div> <script> document.getElementById("div1").addEventListener( "transitionend", myevent); function myevent(event) { // Return seconds. this.innerHTML = "Transition time is : " + event.elapsedTime + " seconds"; } </script> </body> </html> |
Output:
- Before clicking the button:
- After clicking the button:
Supported Browsers:
- Opera
- Internet Explorer
- Google Chrome
- Firefox
- Apple Safari
Please Login to comment...