Nos bénévoles n'ont pas encore traduit cet article en Français. Aidez-nous à réaliser cette tâche !
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, then the event will not fire. The event will also not fire if the animated element becomes display
: none
before the transition fully completes.
General info
- Interface
TransitionEvent
- Bubbles
- Yes
- Cancelable
- Yes
- Target
document
,element
- Default Action
- None
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? |
propertyName Read only |
DOMString |
The name of the CSS property associated with the transition. |
elapsedTime Read only |
Float |
The amount of time the transition has been running, in seconds, when this event fired. Note that this value is not affected by the value of transition-delay . |
pseudoElement Read 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
/* * Listen for the transitionend event on a specified element, e.g. #slidingMenu * Then run a specified function, e.g. showMessage() */ function showMessage() { console.log('Transition has finished'); } var element = document.getElementById("slidingMenu"); element.addEventListener("transitionend", showMessage, false);
Specifications
Specification | Status | Comment |
---|---|---|
CSS Transitions The definition of 'transitionend' in that specification. |
Working Draft | Initial definition. |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 1.0[1] 36 |
4.0 (2.0) | 10 | 10.5[2] 12 12.10 23 |
3.2[1] 7.0.6 |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 2.1 | 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
TransitionEvent
interface transitionstart
,transitioncancel
- CSS properties:
transition
,transition-delay
,transition-duration
,transition-property
,transition-timing-function
.