Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM TransitionEvent Object
The HTML DOM TransitionEvent Object represents events that occur during CSS transitions. It provides information about the transition that has started, is running, or has ended. This object is automatically created when transition-related events are fired on HTML elements with CSS transitions.
Syntax
TransitionEvent objects are created automatically by the browser. You typically interact with them through event listeners −
element.addEventListener("transitionend", function(event) {
// event is a TransitionEvent object
console.log(event.propertyName);
console.log(event.elapsedTime);
});
Properties
The TransitionEvent object inherits from the Event object and has the following specific properties −
| Property | Description |
|---|---|
| propertyName | Returns a string specifying the CSS property name that is transitioning |
| elapsedTime | Returns a number indicating how many seconds the transition has been running when the event fired |
| pseudoElement | Returns a string containing the name of the pseudo-element on which the transition runs (empty string if not on a pseudo-element) |
Transition Events
CSS transitions fire three types of events that use the TransitionEvent object −
- transitionstart − Fired when a transition begins
- transitionrun − Fired when a transition starts running (includes delay time)
- transitionend − Fired when a transition completes
Example − ElapsedTime Property
Following example demonstrates the elapsedTime property by showing how long a transition took to complete −
<!DOCTYPE html>
<html>
<head>
<title>TransitionEvent elapsedTime</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
form {
width: 70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin: 5px;
}
#playArea {
display: inline-block;
border-radius: 50%;
background-color: #DC3545;
width: 50px;
height: 50px;
border: 3px solid #AC3509;
transition: all 1.3s ease;
cursor: pointer;
}
#playArea:hover {
transform: translateX(80px);
}
#divDisplay {
margin-top: 20px;
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>TransitionEvent - elapsedTime</legend>
<p>Hover over the red circle to see the transition:</p>
<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>
When you hover over the red circle, it moves to the right. When the transition completes, the elapsed time is displayed −
Elapsed Time in Transition: 1.3 seconds
Example − PropertyName Property
Following example shows the propertyName property by displaying which CSS property is being transitioned −
<!DOCTYPE html>
<html>
<head>
<title>TransitionEvent propertyName</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.transition-box {
width: 100px;
height: 100px;
background-color: #007bff;
margin: 20px;
transition: background-color 0.5s ease, width 1s ease;
cursor: pointer;
}
.transition-box:hover {
background-color: #28a745;
width: 200px;
}
#output {
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<h2>TransitionEvent PropertyName Example</h2>
<p>Hover over the blue box to trigger multiple transitions:</p>
<div class="transition-box"></div>
<div id="output"></div>
<script>
var box = document.querySelector('.transition-box');
var output = document.getElementById('output');
function logTransition(event) {
output.innerHTML += 'Property: ' + event.propertyName +
', Time: ' + event.elapsedTime + 's<br>';
}
box.addEventListener('transitionend', logTransition);
</script>
</body>
</html>
This example transitions both background-color and width properties simultaneously, showing information about each transition as it completes −
Property: background-color, Time: 0.5s Property: width, Time: 1s
Example − Multiple Transition Events
Following example demonstrates all three transition events −
<!DOCTYPE html>
<html>
<head>
<title>All TransitionEvent Types</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.animated-box {
width: 80px;
height: 80px;
background-color: #ff6b6b;
margin: 20px 0;
transition: transform 2s ease-in-out;
cursor: pointer;
}
.animated-box.moved {
transform: translateX(150px) rotate(180deg);
}
#eventLog {
border: 1px solid #ddd;
padding: 10px;
height: 120px;
overflow-y: auto;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<h2>TransitionEvent Types Demo</h2>
<button onclick="toggleTransition()">Start/Reset Transition</button>
<div class="animated-box" id="animBox"></div>
<h3>Event Log:</h3>
<div id="eventLog"></div>
<script>
var box = document.getElementById('animBox');
var log = document.getElementById('eventLog');
function logEvent(eventType, event) {
log.innerHTML += eventType + ': ' + event.propertyName +
' (' + event.elapsedTime.toFixed(2) + 's)<br>';
log.scrollTop = log.scrollHeight;
}
box.addEventListener('transitionstart', function(e) {
logEvent('TransitionStart', e);
});
box.addEventListener('transitionend', function(e) {
logEvent('TransitionEnd', e);
});
function toggleTransition() {
log.innerHTML = '';
box.classList.toggle('moved');
}
</script>
</body>
</html>
This example logs both the start and end of the transition, showing the complete lifecycle −
TransitionStart: transform (0.00s) TransitionEnd: transform (2.00s)
Browser Compatibility
The TransitionEvent object is well-supported across modern browsers. The transitionstart and transitionrun events have slightly less support than transitionend, but all major browsers support the core functionality.
Conclusion
The TransitionEvent object provides valuable information about CSS transitions through its propertyName, elapsedTime, and pseudoElement properties. It enables developers to track transition progress, chain animations, and create responsive user interfaces that react to transition completion.
142 Views
