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 propertyName Property
The HTML DOM TransitionEvent propertyName property returns a string that identifies the specific CSS property that triggered a transition event. This property is essential for identifying which CSS property completed its transition when multiple properties are transitioning simultaneously.
Syntax
Following is the syntax for accessing the CSS property name from a transition event −
transitionEvent.propertyName
Return Value
The propertyName property returns a string representing the name of the CSS property that finished transitioning. For example, it might return "transform", "width", "opacity", or any other CSS property that was being transitioned.
Example − Single Property Transition
Following example demonstrates the propertyName property with a transform transition −
<!DOCTYPE html>
<html>
<head>
<title>TransitionEvent propertyName</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.container {
width: 70%;
margin: 0 auto;
text-align: center;
}
#playArea {
display: inline-block;
border-radius: 50%;
background-color: #DC3545;
width: 50px;
height: 50px;
border: 3px solid #AC3509;
transition: transform 1.3s ease;
margin: 20px;
}
#playArea:hover {
transform: translateX(80px);
}
#divDisplay {
margin-top: 20px;
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<div class="container">
<h2>TransitionEvent propertyName Example</h2>
<p>Hover over the red circle to see the transition property name:</p>
<div id="playArea"></div>
<div id="divDisplay">Hover over the circle above</div>
</div>
<script>
var divDisplay = document.getElementById("divDisplay");
var playDisplay = document.getElementById("playArea");
function getPropertyName(event) {
divDisplay.textContent = 'CSS Property Used for Transition: ' + event.propertyName;
}
playDisplay.addEventListener("transitionend", getPropertyName);
</script>
</body>
</html>
When you hover over the red circle, it slides to the right using a transform transition. When the transition completes, the event displays "transform" as the property name.
CSS Property Used for Transition: transform
Example − Multiple Property Transitions
Following example shows how propertyName helps identify which property finished transitioning when multiple CSS properties are animated −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Transitions</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.container {
width: 70%;
margin: 0 auto;
text-align: center;
}
#multiBox {
display: inline-block;
width: 60px;
height: 60px;
background-color: #28a745;
border-radius: 10px;
margin: 20px;
transition: width 1s ease, height 1.5s ease, background-color 2s ease;
}
#multiBox:hover {
width: 120px;
height: 120px;
background-color: #007bff;
}
#eventLog {
margin-top: 20px;
text-align: left;
max-height: 150px;
overflow-y: auto;
border: 1px solid #ccc;
padding: 10px;
background-color: #f8f9fa;
}
</style>
</head>
<body>
<div class="container">
<h2>Multiple Property Transitions</h2>
<p>Hover over the green box to see multiple transitions:</p>
<div id="multiBox"></div>
<div id="eventLog">
<strong>Transition Events:</strong><br>
Hover over the box to see events...
</div>
</div>
<script>
var eventLog = document.getElementById("eventLog");
var multiBox = document.getElementById("multiBox");
function logTransition(event) {
eventLog.innerHTML += "<br>Property finished: " + event.propertyName +
" (Duration: " + event.elapsedTime + "s)";
}
multiBox.addEventListener("transitionend", logTransition);
</script>
</body>
</html>
This example transitions three properties simultaneously with different durations. The event log shows which property completes first −
Property finished: width (Duration: 1s) Property finished: height (Duration: 1.5s) Property finished: background-color (Duration: 2s)
Common Use Cases
The propertyName property is particularly useful in the following scenarios −
Conditional Logic − Execute different code based on which property finished transitioning.
Animation Sequences − Trigger the next animation step only when a specific property completes.
Performance Monitoring − Track which CSS properties are being transitioned for optimization purposes.
Debug Transitions − Identify unexpected or problematic property transitions during development.
Example − Conditional Actions Based on Property
Following example demonstrates executing different actions based on the completed property −
<!DOCTYPE html>
<html>
<head>
<title>Conditional Transition Actions</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
#actionBox {
width: 80px;
height: 80px;
background-color: #ffc107;
margin: 20px auto;
transition: transform 1s ease, opacity 1.5s ease;
cursor: pointer;
}
#actionBox.animate {
transform: rotate(180deg);
opacity: 0.3;
}
#status {
text-align: center;
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div style="text-align: center;">
<h2>Click the Box for Conditional Actions</h2>
<div id="actionBox"></div>
<div id="status">Click the yellow box above</div>
</div>
<script>
var actionBox = document.getElementById("actionBox");
var status = document.getElementById("status");
function handleTransition(event) {
if (event.propertyName === "transform") {
status.textContent = "Rotation completed! Opacity still transitioning...";
} else if (event.propertyName === "opacity") {
status.textContent = "All transitions completed! Click again to reset.";
}
}
function toggleAnimation() {
actionBox.classList.toggle("animate");
status.textContent = "Transitioning...";
}
actionBox.addEventListener("transitionend", handleTransition);
actionBox.addEventListener("click", toggleAnimation);
</script>
</body>
</html>
This example shows different status messages based on which property completes its transition, demonstrating how propertyName enables property-specific logic.
Browser Compatibility
The TransitionEvent.propertyName property is widely supported across modern browsers including Chrome, Firefox, Safari, Edge, and Opera. It was introduced as part of the CSS Transitions specification and has been stable for several years.
Conclusion
The TransitionEvent.propertyName property provides essential information about which CSS property completed its transition, enabling developers to create sophisticated animation sequences and conditional logic. This property is particularly valuable when working with multiple simultaneous transitions where different actions need to be triggered based on the completing property.
116 Views
