如何用JavaScript实现点击时隐藏并重新显示同一元素？

AI 小北

2026-5-25

为什么需要设置延迟？怎么解决？

这确实需要设置延迟，不然浏览器根本不会处理你的类移除操作——听我给你掰扯清楚：

浏览器的重绘/回流操作是在当前宏任务执行完毕后才会统一进行的。你现在在同一个点击事件回调里，先移除animateBar类，紧接着又立刻添加回去，这两个同步操作会被浏览器合并处理，最终DOM元素的类列表里还是保留着animateBar，等于没变化，自然不会触发动画的重新执行。

两种可行的解决方案

方案1：用`setTimeout`延迟添加类

哪怕设置延迟为0ms，也能让添加类的操作进入下一个宏任务，等当前帧的重绘完成后再执行：

var button = document.querySelector('.btn');
button.addEventListener('click', function() {
  const bar = document.querySelector('.bar');
  bar.classList.remove('animateBar');
  // 延迟到下一个宏任务执行添加操作
  setTimeout(() => {
    bar.classList.add('animateBar');
  }, 0);
});

方案2：用`requestAnimationFrame`精准控制

这种方式比setTimeout更贴合浏览器的绘制周期，确保类的添加是在移除后的重绘完成之后：

var button = document.querySelector('.btn');
button.addEventListener('click', function() {
  const bar = document.querySelector('.bar');
  bar.classList.remove('animateBar');
  // 第一次requestAnimationFrame等待当前帧绘制完成
  requestAnimationFrame(() => {
    // 第二次requestAnimationFrame在新的帧开始时执行添加操作
    requestAnimationFrame(() => {
      bar.classList.add('animateBar');
    });
  });
});