Вот сокращенный тестовый пример:
var div = document.createElement('div');
div.classList.add('test');
document.body.appendChild(div);
window.setTimeout(
function() {
div.style.boxShadow = '0 0 100px blue';
div.ontransitionend = function() {
console.log('transition end');
};
div.onclick = function() {
console.log('click');
};
}, 100);
div.test {
width: 100px;
height: 100px;
background: red;
box-shadow: none;
transition: box-shadow 1s;
}
Правильный щелчок по элементу div вызывает сообщение onclick
, но конец перехода не вызывает сообщение «end end».Изменение обработчика событий на это заставляет его работать:
div.addEventListener('transitionend', function() { console.log('transition end'); } );
Почему разница между встроенным и addEventListener
?
Согласно MDN , ontransitionend
должна работатькак я уже писал, и в поисках, Chrome поддерживает его без префикса (на самом деле, я помню, как использовал его раньше без проблем).Стоит отметить, что пример, показанный на этой странице MDN, не работает (не отображает текст «увеличение» и «готово») для меня в Chrome.