The creation and completion of a CSS Transition result in a corresponding DOM Event. An event is fired for each property that undergoes a transition which gives the name of the property and the duration for which transition occurs. If the transition is not executed before completion the event will not fire.
Property Values:
- propertyName: Returns the name of the transition.
- elapsedTime: Returns the number of seconds a transition has been running.
Event Types:
- transitionend: The event occurs when a CSS transition has been completed.
- transitionstart: The event occurs when a CSS transition has started.
Syntax:
-
for transitionend event:
object.addEventListener("transitionend", myScript); - Google Chrome-26.0
- Internet Explorer-10.0
- Mozilla Firefox-16.0
- Safari-6.1
- Opera-12.1
Example-1: “transitionend” event
<!DOCTYPE html> <html>
<head>
<style>
#myDIV {
width: 100px;
height: 100px;
background: green;
transition: width 2s;
}
#myDIV:hover {
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<center>
<div id="myDIV"></div>
<script>
// TransitionEnd Event for SAFARI.
document.getElementById(
"myDIV").addEventListener("webkitTransitionEnd", func);
// TransitionEnd Event for other
// Standard Browsers.
document.getElementById(
"myDIV").addEventListener("transitionend", func);
function func() {
this.innerHTML =
"transitionend event occured -"
"The transition has completed";
this.style.backgroundColor = "lime green";
}
</script>
</center>
</body>
</html>
|
Output:
Before:
After:
Example-2: “TransitionEvent” propertyName property.
<head>
<style>
#myDIV {
width: 100px;
height: 100px;
background: green;
-webkit-transition: 3s;
transition: 3s;
}
#myDIV:hover {
height: 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) {
// Property Name
this.innerHTML = "CSS Property used: "
+ event.propertyName;
}
</script>
</body>
</html>
|
Output:
Before:
After:
Supported Browser: