javascript - .toggle() 无限且不确定地切换类名

Question

我不明白为什么在使用动画切换类名时 .toggle() 会出现问题。想想我做的这个实验:

var query = document.querySelector.bind(document);

query('button').addEventListener('click', function() {
  [].forEach.call(query('.container').children, function(box, i) {
    setInterval(function() {
      box.classList.toggle('popIn');
    }, 300 * i);
  })
})

.container > .box {
  width: 100px;
  height: 100px;
  background: cyan;
  display: inline-block;
  transform: scale(0);
  transition: all 0.3s ease-in-out;
}

.container > .box.popIn {
  transform: scale(1);
}

<button>Click</button>
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

当我单击该按钮时，它会无限期地切换框的类名，就好像它不确定是添加还是删除它们一样。是因为 .toggle() 方法在 forEach 循环中吗？

Answer 1

您的问题出在 setInterval 函数中。您是说，每 300 毫秒执行一次此事件。你想要的是 setTimeout，它告诉事件在 300 毫秒后停止。请参阅下面的代码片段，我在其中进行了更改。

查看有关 setTimeout 的更多信息 查看有关 setInterval 的更多信息

var query = document.querySelector.bind(document);

query('button').addEventListener('click', function() {
  [].forEach.call(query('.container').children, function(box, i) {
    setTimeout(function() {
      box.classList.toggle('popIn');
    }, 300 * i);
  })
})

.container > .box {
  width: 100px;
  height: 100px;
  background: cyan;
  display: inline-block;
  transform: scale(0);
  transition: all 0.3s ease-in-out;
}

.container > .box.popIn {
  transform: scale(1);
}

<button>Click</button>
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>