Понимание событий перехода CSS3

Переходы CSS3 обеспечивают плавную анимацию и визуальные эффекты для веб-элементов. Чтобы улучшить взаимодействие с пользователем и синхронизировать действия с этими переходами, важно отслеживать их ход. В этой статье рассматривается вопрос о том, предоставляет ли CSS3 события для проверки начала или завершения перехода.

Проект переходов CSS W3C

Проект переходов CSS W3C устанавливает, что Переход CSS запускает соответствующие события DOM. Для каждого переходного свойства генерируется событие. Это позволяет разработчикам выполнять действия, совпадающие с завершением перехода.

WebKit

В WebKit событие webkitTransitionEnd вызывается после завершения перехода. Установка прослушивателя событий JavaScript для этого события позволяет разработчикам отслеживать завершение.

box.addEventListener('webkitTransitionEnd', function(event) {
  alert("Finished transition!");
}, false);

Mozilla, Opera и Internet Explorer

Большинство браузеров поддерживают одно событие для завершения перехода:

• Firefox :transitionend
• Opera: oTransitionEnd
• WebKit: webkitTransitionEnd
• Internet Explorer:transitionend

В Internet Explorer событие перехода происходит только в случае успешного завершения перехода; его преждевременное удаление предотвращает запуск события.

Объединение

Используя соответствующее событие на основе браузера и используя прослушиватели событий JavaScript, разработчики могут отслеживать прогресс переходов CSS3 и выполнять необходимые действия синхронно с их завершением.