什么时候使用requestAnimationFrame来用javascript改变元素样式？

Question

我有一个事件处理程序，点击DOM element，通过弄乱DOM element style属性来进行CSS转换。

代码示例A

function toggleElement(isExpanded, element) {
  element.style.transition = 'opacity 500ms';
  element.style.opacity = isExpanded ? 0 : 1;
}

我可以想象而不是简单地写element.style.opacity = isExpanded ? 0 : 1;我可以将它包装到requestAnimationFrame函数调用中：

代码示例B

function toggleElement(isExpanded, element) {
  element.style.transition = 'opacity 500ms';
  requestAnimationFrame(() => {
    element.style.opacity = isExpanded ? 0 : 1;
  })
}

问题：使用代码示例A和代码示例B有什么区别？

我的理解：

我假设我应该在element.style内包含所有requestAnimationFrame个更改，因此它们会在下一个浏览器时刻执行，而不是立即执行。因此，用户肯定会看到它们。如果我需要制作不可见的内容（或尽可能接近不可见），我不会使用requestAnimationFrame方法，执行一些原始element.style更改，例如在其他样式的效果期间计算元素属性并将其恢复为默认/初始/状态。

P.S。我有一个用例，我实际上需要在JS中做这样的事情，否则只需使用CSS。