The transitionend event is fired when a CSS transition has completed. In the case where a transition is removed before completion, such as if the transition-property is removed or display is set to "none", then the event will not be generated.
General info
- Specification
- CSS Transitions
- Interface
TransitionEvent- Bubbles
- Yes
- Cancelable
- Yes
- Target
Element,Document,Window- Default Action
- undefined
Properties
| Property | Type | Description |
|---|---|---|
target Read only |
EventTarget |
The event target (the topmost target in the DOM tree). |
type Read only |
DOMString |
The type of event. |
bubbles Read only |
Boolean |
Whether the event normally bubbles or not |
cancelable Read only |
Boolean |
Whether the event is cancellable or not? |
propertyNameRead only |
DOMString |
The name of the CSS property associated with the transition. |
elapsedTimeRead only |
Float |
The amount of time the transition has been running, in seconds, as of the time the event was generated. This value is not affected by the value of transition-delay. |
pseudoElementRead only |
DOMString |
The name (beginning with two colons) of the CSS pseudo-element on which the transition occured (in which case the target of the event is that pseudo-element's corresponding element), or the empty string if the transition occurred on an element (which means the target of the event is that element). |
Example
This example sets up an event handler to detect the transitionend event, in order to change the text displayed inside the element once the transition is complete.
let element = document.getElementById("slidingMenu");
element.addEventListener("transitionend", function(event) {
element.innerHTML = "Done!";
}, false);
Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Transitions The definition of 'transitionend' in that specification. |
Working Draft | Initial definition. |
Browser compatibility
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Basic support | 1.0[1] 36 |
(Yes) | 4.0 (2.0) | 10 | 10.5[2] 12 12.10 23 |
3.2[1] 7.0.6 |
| Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | 2.1 | (Yes) | 4.0 (2.0) | ? | 10[2] 12 12.10 |
3.2[1] |
[1] Implemented in Chrome 1.0, Android 2.1 and WebKit 3.2 as webkitTransitionEnd. Chrome 36 and WebKit 7.0.6 use the standard transitionend.
[2] Implemented as oTransitionEnd starting from Opera 10.5, as otransitionend starting from version 12 and as the standard transitionend starting from version 12.10.
See also
- The
TransitionEventinterface transitionstart,transitioncancel- CSS properties:
transition,transition-delay,transition-duration,transition-property,transition-timing-function.