Событие transitionend

События DOM Событие TransitionEvent

Определение и использование

Событие transitionend возникает при завершении CSS-преобразования.

Комментарий:Если преобразование было удалено до завершения, например, если был удален CSS transition-property Свойства, которые не вызывают событие transitionend, например, если удалить CSS

Для получения дополнительной информации о CSS-переходах изучите наш Учебник CSS3 переходы.

Пример

Когда завершается CSS-переход, выполните что-то с элементом <div>:

// код для Safari 3.1 до 6.0
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);
// стандартная грамматика
document.getElementById("myDIV").addEventListener("transitionend", myFunction);

Попробуйте сами

Грамматика

объект.addEventListener("webkitTransitionEnd", myScript);  // код для Safari 3.1 до 6.0
объект.addEventListener("transitionend", myScript);        // стандартная грамматика

Комментарий:Internet Explorer 8 и более ранние версии не поддерживают Метод addEventListener().

Технические детали

Бubbles: Поддержка
Отменяемость: Поддержка
Тип события: Событие TransitionEvent
Версия DOM: Уровень 3 событий

Поддержка браузеров

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает данное событие.

Числа, заканчивающиеся на "webkit", "moz" или "o", указывают на первую версию, использующую эти префиксы.

Событие Chrome IE Firefox Safari Opera
transitionend 26.0
4.0 (webkit)		 10.0 16.0
4.0 (moz)		 6.1
3.1 (webkit)		 12.1
10.5 (o)

Соответствующие страницы

CSS учебник: CSS3 переход

CSS справочник: свойство CSS3 transition

Руководство CSS: Свойство transition-property CSS3

События DOM Событие TransitionEvent