Question

我不明白为什么在使用动画切换类名时遇到.toggle()的问题。考虑一下我做的这个实验：

＆＃13;

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);
  })
})

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

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

Answer 1

你的问题在于setInterval函数。你是说，每300ms执行一次这个事件。你想要的是setTimeout，它告诉事件在300ms后停止。请参阅下面我已做出更改的片段。

查看有关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>

.toggle（）无限且不确定切换类名

1 个答案: