transitionend
Событие transitionend
срабатывает, когда CSS transition (en-US) закончил своё выполнение. В случае, когда анимация удаляется до её завершения(например, если transition-property [en-US] (en-US) удаляется), то событие не срабатывает.
Общая информация
- Интерфейс
TransitionEvent
(en-US)- Всплывает
-
Да
- Отменяемое
-
Да
- Элемент
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 |
---|
CSS Transitions # transitionend |
Совместимость с браузерами
BCD tables only load in the browser
Также
- The
TransitionEvent
(en-US) interface and thetransitionend
(en-US) event.