ontransitionend 不触发/附加但 addEventListener 有效答案

【问题标题】：ontransitionend not firing/attaching but addEventListener worksontransitionend 不触发/附加但 addEventListener 有效
【发布时间】：2018-10-08 05:40:05
【问题描述】：

这是一个简化的测试用例：

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 消息，但过渡结束不会触发“过渡结束”消息。将事件处理程序更改为此使其工作：

div.addEventListener('transitionend', function() { console.log('transition end'); } );

为什么 inline 和 addEventListener 有区别？

根据MDN，ontransitionend 应该可以像我写的那样工作，并且四处搜索，Chrome 确实支持它不带前缀（事实上我记得以前使用它没有问题）。值得注意的是，该 MDN 页面上显示的示例在 Chrome 中对我来说不起作用（不显示“缩放”和“完成”文本）。

【问题讨论】：

我确实将您的代码编辑为实时 sn-p，但对我来说它可以工作（在 FF 63 上）
看来chrome只允许设置全局前缀处理程序window.onwebkittransitionend = function(e) { console.log('transition end', e.target); };我的意思是使用直接赋值。

标签： javascript css transition

【解决方案1】：

显然答案是 Chrome 出于某种原因 does not support ontransitionend or several other transition events，尽管我可以发誓我以前使用过它们...

Firefox 正确运行我的测试用例和 MDN 的测试用例。

【讨论】：