时间戳

首页 > 解决方案 > ontransitionend 不触发/附加但 addEventListener 有效

javascript - ontransitionend 不触发/附加但 addEventListener 有效

问题描述

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

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 中对我不起作用（不显示“缩放”和“完成”文本）。

标签： javascriptcsstransition

解决方案

显然答案是 Chrome 出于某种原因不支持ontransitionend或其他几个转换事件，即使我可以发誓我以前使用过它们......

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

推荐阅读