Javascript void element.offsetWidth有什么用途？

void元素.offsetWidth

是一行奇怪的代码，似乎什么都不做，但CSS动画需要它才能工作。这条生产线做什么？为什么需要它

如果注释掉整行，则动画只发生一次，但不会重复。（如果删除了

无效项

，该功能仍然有效。）

他们住在这里；我试图复制以下相关摘录：

script.js:

beatIndicator = document.getElementById("beatIndicator"),

...

// Happens every time a beat starts:
beatIndicator.classList.remove("anim");
void beatIndicator.offsetWidth;         // Why is this line needed?
beatIndicator.classList.add("anim");

示例高级.html

<span style="display: none;" id="beatIndicator" class="pulse"></span>


<style>
.pulse {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f44336;
    z-index: 3;
    left: -18px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
  }

  @keyframes pulse-anim {
      from {
        box-shadow: rgba(244, 67, 54, 1) 0px 0px 0px 0px;
      }
      to {
        box-shadow: rgba(244, 67, 54, 0) 0px 0px 0px 14px;
      }
  }
  .pulse.anim {
    animation: pulse-anim;
  }
  </style>

.脉搏{
宽度：40px；
高度：40px；
边界半径：50%；
背景#f44336；
z指数：3；
左-18px；
显示：内联块；
垂直对齐：中间对齐；
左边距：10px；
}
@关键帧脉冲动画{
从{
盒影：rgba（244,67,54,1）0px 0px 0px 0px；
}
到{
盒影：rgba（244,67,54,0）0px 0px 0px 14px；
}
}
.pulse.anim{
动画：脉冲动画；
}

当您对dom进行更改时，例如

classList.remove（'anim'）

，这可能会导致对页面的一系列更改。呈现这些更改可能会很昂贵，而且由于很常见的情况是您会连续更改多个内容，浏览器会尝试将累积的更改成批处理，并且只在您所做的操作结束时执行计算

如果没有那条奇怪的线，那么会发生以下情况：

• 你移除了这个类。浏览器会注意到这一点，但不会重新绘制屏幕
• 您可以添加该类。浏览器会注意到这一点，但不会重新绘制屏幕
• 您的函数完成后，浏览器决定进行必要的计算，以使页面符合您的要求。。。但一切都没有改变！您已经将页面恢复到单击处理程序开始之前的状态。由于没有任何变化，显示保持不变；没有动画运行

这一行额外的代码所做的是要求浏览器向您提供有关dom的信息。但为了知道offsetWidth是什么，浏览器必须放弃批量更改的计划，立即执行页面的回流。当前状态没有运行动画类，这是一个更改，因此动画将重置。稍后，当函数完成时，它会再次执行计算，并看到您进行了另一次更改，与它提供offsetWidth时相比，因此它也应用了该更改

简言之：你强迫浏览器做额外的工作，而在这种情况下，这恰好是可取的。在大多数情况下，强迫浏览器做额外的工作是一件坏事。大多数情况下，您希望避免以这种方式查询dom，因为这样会降低性能

另一种方法是立即删除该类，稍后再添加该类，如下所示：

element.addEventListener("click", function(e){
  element.classList.remove("anim");
  setTimeout(() => element.classList.add("anim"), 0);
}, false);