按顺序隐藏3个元素，不使用JavaScript "transitionend“事件？

Question

​

​

什么。我有3个框：blue、red和black，我试图使用JavaScript事件侦听器依次转换它们：black、red和blue。

HOW：https://codepen.io/gremo/pen/XWVeQVP?editors=1010

基本的HTML结构和嵌套(完整示例的pen)：

<div id="container">
    <div id="blue"></div>
    <div id="red">
        <div id="black"></div>
    </div>
</div>

JavaScript代码非常简单：

const blue = document.getElementById('blue');
const red = document.getElementById('red');
const black = document.getElementById('black');

const hideElement = element => {
  console.log(`Hiding element ${element.getAttribute('id')}`);
  element.classList.add(element.dataset.hideClass);
};

black.addEventListener('transitionend', () => hideElement(red)); // when black transition ends, hide the red
red.addEventListener('transitionend', () => hideElement(blue)); // when red transition ends, hide the blue
hideElement(black); // hide the black (start the chain)

THE PROBLEM：在black结束后，blue和red同时开始.这是错误的，因为blue应该在red完成后开始隐藏。此外，控制台显示blue的blue事件侦听器被调用2次。

任何帮助都是非常感谢的，我从几天以来一直在努力解决这个问题。

​

​

Answer 1

由于black是red的一个子类，因此transitionend事件出现了冒泡，导致red两次触发该事件：

document.addEventListener('DOMContentLoaded', () => {
  const blue = document.getElementById('blue');
  const red = document.getElementById('red');
  const black = document.getElementById('black');

  const hideElement = element => {
    console.log(`Hiding element ${element.getAttribute('id')}`);
    element.classList.add(element.dataset.hideClass);
  };

  black.addEventListener('transitionend', (e) => {
    e.stopPropagation();// <-- added this line
    hideElement(red);
  });
  red.addEventListener('transitionend', () => hideElement(blue));
  hideElement(black);
});

(编辑从您的代码；我不能分叉，因为我太懒注册)

Answer 2

transitionend事件将触发一旦执行的所有侦听器。在第一个事件触发两个运行之前，红色和黑色都会注册事件侦听器。为了防止这种情况，您可以传递一个函数，该函数将在隐藏元素函数中添加事件侦听器，或者更好地将事件传递到元素旁边并调用stopPropagation。stopPropagation是一个事件函数，它将阻止事件的传播，因此只会触发第一个事件。

e?.stopPropagation()

下面是一个修改后的函数，它应该在您的上下文中工作。

document.addEventListener('DOMContentLoaded', () => {
  const blue = document.getElementById('blue');
  const red = document.getElementById('red');
  const black = document.getElementById('black');

  const hideElement = (element,e) => {
    console.log(`Hiding element ${element.getAttribute('id')}`);
    e?.stopPropagation()
    element.classList.add(element.dataset.hideClass);
  };
  black.addEventListener('transitionend', (e) => hideElement(red,e));
  red.addEventListener('transitionend', (e) => hideElement(blue,e));
  hideElement(black);
});