Событие transitionend
срабатывает, когда CSS transition закончил свое выполнение. В случае, когда анимация удаляется до ее завершения(например, если transition-property [en-US] удаляется), то событие не срабатывает.
Общая информация
- Интерфейс
TransitionEvent
- Всплывает
- Да
- Отменяемое
- Да
- Элемент
document
,element
- Действие по умолчанию
- Нет
Свойства
Property | Type | Description |
---|---|---|
target Только для чтения |
EventTarget |
The event target (the topmost target in the DOM tree). |
type Только для чтения |
DOMString |
The type of event. |
bubbles Только для чтения |
Boolean |
Whether the event normally bubbles or not. |
cancelable Только для чтения |
Boolean |
Whether the event is cancellable or not. |
propertyName Только для чтения |
DOMString |
The name of the CSS property associated with the transition. |
elapsedTime Только для чтения |
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 . |
pseudoElement Только для чтения |
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). |
Пример
/*
* Прослушивать событие transitionend на определенном элементе, т.е. #slidingMenu
* Затем, вызвать определенную функцию, т.е. showMessage()
*/
function showMessage() {
alert('Transition закончил свое выполнение');
}
var element = document.getElementById("slidingMenu");
element.addEventListener("transitionend", showMessage, false);
Спецификация
Specification | Status | Comment |
---|---|---|
CSS Transitions Определение 'transitionend' в этой спецификации. |
Рабочий черновик | Initial definition. |
Совместимость с браузерами
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 1.0 as webkitTransitionEnd |
4.0 (2.0) | 10 | 10.5 as oTransitionEnd 12 as otransitionend 12.10 as transitionend |
3.2 as webkitTransitionEnd |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 2.1 as webkitTransitionEnd |
4.0 (2.0) | ? | 10 as oTransitionEnd 12 as otransitionend 12.10 as transitionend |
3.2 as webkitTransitionEnd |
Также
- The
TransitionEvent
interface and thetransitionend
event.