Чем отличается использование события transitionend от transitioncancel в CSS-анимациях?
Использование событий transitionend и transitioncancel в CSS-анимациях отличается тем, что каждое из них возникает в определённое время. 12
transitionend срабатывает после завершения CSS-перехода. 25 Если переход удаляется до завершения, то событие transitionend сгенерировано не будет. 2 Например, если во время перехода удалили свойство transition или установили для элемента свойство display со значением none. 2
transitioncancel возникает, если переход отменён между transitionrun и до transitionend. 1 Например, если наводить курсор на кнопку с односекундным переходом, а затем убрать курсор до завершения перехода. 1 Если переход отменён, событие transitionend не сработает. 1
Таким образом, transitionend используется для обнаружения завершения анимации, а transitioncancel — для обнаружения отмены анимации до её завершения. 24
