HTML | DOM TransitionEvent
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: