CSS transitionend事件会触发两次

在本文中，我们将介绍CSS的transitionend事件被触发两次的原因，并提供一些示例说明。

阅读更多：CSS 教程

什么是CSS transitionend事件？

CSS的transitionend事件在CSS过渡（transition）结束时触发。过渡是一种用于使元素从一个状态过渡到另一个状态的效果。当元素的过渡效果完成时，transitionend事件将被触发。

transitionend事件为什么会触发两次？

在某些情况下，CSS的transitionend事件会触发两次。这可能会让开发人员感到困惑，因为他们只期望事件触发一次。

造成CSS transitionend事件触发两次的原因是浏览器的实现方式不同。某些浏览器在寻找转换属性的过程中会冒泡，导致transitionend事件触发两次。而其他浏览器则只触发一次。这种差异性可能会对开发人员造成麻烦，尤其是在处理过渡效果较复杂的情况下。

示例说明

让我们通过一个示例来说明CSS transitionend事件触发两次的情况。假设我们有一个按钮，当我们点击按钮时，元素的背景颜色将渐变过渡到另一种颜色。

HTML代码如下：

<button id="myButton">点击我</button>

CSS代码如下：

#myButton {
  background-color: blue;
  transition: background-color 2s;
}

#myButton.clicked {
  background-color: red;
}

JavaScript代码如下：

var button = document.getElementById("myButton");
button.addEventListener("click", function() {
  this.classList.add("clicked");
});

button.addEventListener("transitionend", function() {
  console.log("transition ended");
});

在上面的示例中，当我们点击按钮后，按钮的背景颜色将在2秒内过渡到红色。在过渡结束后，我们会在控制台打印出”transition ended”。然而，你可能会注意到这个事件会触发两次。

这是因为某些浏览器（如Chrome和Firefox）在过渡属于子元素的情况下，会对子元素的过渡和父元素的过渡分别触发transitionend事件。所以，在我们的示例中，按钮的背景颜色过渡完毕后，会触发两次transitionend事件。

如何解决transitionend事件触发两次的问题？

虽然在不同浏览器中transitionend事件的触发次数可能不同，但我们可以采取一些方法来解决这个问题。

1. 检查事件的target属性

在transitionend事件的处理程序中，我们可以检查事件的target属性来确定是否确实是我们所期望的元素触发了事件。例如，我们可以修改示例中的代码来进行检查：

button.addEventListener("transitionend", function(event) {
  if (event.target === this) {
    console.log("transition ended");
  }
});

通过这种方式，在transitionend事件触发时，我们会首先检查事件的target属性是否等于我们所期望的元素(this)。只有在匹配时才会处理事件，避免处理不必要的多余事件。

2. 使用单次事件监听器

另一种解决transitionend事件触发两次的问题的方法是，使用只触发一次的事件监听器。我们可以使用addEventListener方法的{once: true}选项来实现这一点：

button.addEventListener("transitionend", function() {
  console.log("transition ended");
}, {once: true});

通过使用{once: true}选项，我们可以确保事件只会被触发一次，而不会出现多余的事件触发。

需要注意的是，{once: true}选项的兼容性较差，不是所有浏览器都支持。如果需要考虑跨浏览器兼容性，我们可能需要采取其他方法来解决这个问题。

总结

CSS的transitionend事件在CSS过渡完成时触发。然而，由于浏览器实现方式的不同，这个事件可能会触发两次。本文介绍了CSS transitionend事件触发两次的原因，并提供了一些解决这个问题的方法。我们可以通过检查事件的target属性或使用只触发一次的事件监听器来解决这个问题。希望本文对你理解和解决CSS transitionend事件触发两次的问题有所帮助。