ontransitionend не запускает / присоединяет, но addEventListener работает - PullRequest
0 голосов
/ 08 октября 2018

Вот сокращенный тестовый пример:

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.

1 Ответ

0 голосов
/ 08 октября 2018

Видимо, ответ таков: Chrome по какой-то причине не поддерживает ontransitionend или несколько других событий перехода , хотя я мог бы поклясться, что использовал их раньше ...

Firefox правильно запускает мой тестовый набор и MDN.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...