重复执行 transitionend 事件

如何解决重复执行 transitionend 事件

我想了解为什么以下代码会以指数方式复制 transitionend 的返回值。

这对我来说没有任何意义，因为它们应该具有相同的行为并且应该只执行一次。

下面评论了预期的行为。

(function() {
  var animations = {
    start: function() {
      console.log('animations has started');
      this.transition.run();
    },transition: {
      duration: 500,run: function() {
        console.log('transitions is running');
        const el = document.querySelector('.Box');
        el.classList.toggle('fadein');
        // dont duplicate as expected !!!GOOD BEHAVIOR!!!
        /*el.ontransitionend = function(){
          console.log('transitionend triggered!');
        };*/
        // duplicates at every click !!!BAD BEHAVIOR!!!
        el.addEventListener('transitionend',function() {
          console.log('transitionend triggered');
        },false);
      }
    }
  };
  const bt = document.querySelector('button');
  bt.addEventListener('click',() => {
    animations.start();
  })
})();

.Box {
  width: 100%;
  height: 100vh;
  background: green;
  opacity: 0;
  transition: opacity .5s linear;
}

.Box.fadein {
  opacity: 1;
}

<button>Start Transition</button>
<div class="Box"></div>```

这种行为太奇怪了！

解决方法

来自MDN event handler docs：

要设置事件处理程序代码，您只需将其分配给适当的 onevent 属性即可。 只能为元素中的每个事件分配一个事件处理程序。如果需要，可以通过将另一个函数分配给同一属性来替换处理程序。

在元素上设置事件处理程序的最灵活方法是使用 EventTarget.addEventListener 方法。这种方法允许将多个侦听器分配给一个元素，并在需要时删除侦听器（使用 EventTarget.removeEventListener）。

这是什么意思？

使用 el.ontransitionend 总是替换“旧”事件处理程序，因为只能有一个属性处理程序。
但是对于 el.addEventListener，您总是会添加一个新的处理程序，只要您不明确删除它，旧的处理程序就会保持不变。