Question

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

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消息，但是过渡结束不会触发“ transition end”消息。更改事件处理程序使其起作用：

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

为什么内联和addEventListener之间有区别？

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

Answer 1

显然，答案是Chrome由于某种原因does not support ontransitionend or several other transition events，即使我发誓我以前也曾经使用过它们……

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

ontransitionend不触发/附加，但addEventListener起作用

1 个答案: