transitionend event
Examples
Modify <div> CSS after the completion of the transition elements and text styles:
. Document.getElementById ( "myDIV") addEventListener ( "webkitTransitionEnd", myFunction);
// Standard syntax
. Document.getElementById ( "myDIV") addEventListener ( "transitionend", myFunction);
try it"
Definition and Usage
transitionend event is triggered after the CSS to complete the transition.
Note: if the transition is removed before completion, for example, the CSS Transition-Property attribute is removed, the transition event will not be triggered.
More on CSS transitions, please see our CSS3 transitions .
Browser Support
Figures in the table represent the first browser to support this version of events.
"Webkit" or "moz" or "o" in support of the specified number prefix the first version of the event.
Event | |||||
---|---|---|---|---|---|
transitionend | 26.0 4.0 to webkitTransitionEnd | 10.0 | 16.0 4.0 to mozTransitionEnd | 6.1 3.1 webkitTransitionEnd | 12.1 10.5 to oTransitionEnd |
Note: Safari 3.1 Dao version 6.0 supported the event, use webkitTransitionEnd prefix.
grammar
object .addEventListener ( "transitionend", myScript ); // Standard syntax
Note: Internet Explorer 8 and earlier versions of IE do not support addEventListener () method.
technical details
Whether to support the bubble: | Yes |
---|---|
It can be canceled: | Yes |
Event Type: | TransitionEvent |
Related Pages
CSS tutorial: CSS3 transition
CSS Reference: CSS3 transition property
CSS Reference: CSS3 Transition Properties-Property
Event objects