使用insertBefore()插入DOM后如何获知元素实际可见以应用CSS变换？

问题核心原因 #

浏览器的渲染机制会将同一段JS执行上下文内的所有DOM修改操作合并到一次重排/重绘中执行，所以你插入元素、移除类的两个操作会被合并处理，浏览器最终识别到的就是没有invisible类的元素，自然不会触发过渡效果。

针对当前场景的直接解法 #

你只需要在插入元素、添加invisible类之后，强制浏览器先计算一次当前元素的布局状态，再执行移除类的操作即可，有两种常用的稳定实现方式：

方案1：强制读取布局属性触发同步重排 #

插入元素后主动读取元素的offsetHeight、offsetWidth等布局相关属性，浏览器会立即计算当前渲染树状态，将元素的初始隐藏状态固化，之后再移除类就能正常触发过渡。
示例代码：

// 创建弹窗元素
const modalWrapper = document.createElement('div')
modalWrapper.classList.add('modal-wrapper', 'invisible')
// 插入到body首节点
document.body.insertBefore(modalWrapper, document.body.firstChild)
// 强制触发布局计算，void运算符是为了避免代码校验工具报未使用变量的警告
void modalWrapper.offsetHeight
// 移除隐藏类触发过渡
modalWrapper.classList.remove('invisible')

注意你的invisible类不能使用display: none，因为该属性会让元素不参与布局计算，读取布局属性也不会生效，建议用以下写法：

.modal-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.7);
  transition: opacity 0.4s ease;
  opacity: 1;
}
.modal-wrapper.invisible {
  opacity: 0;
  /* 可配合visibility避免透明状态下遮挡下层元素交互 */
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

方案2：用requestAnimationFrame等待渲染帧 #

两次嵌套requestAnimationFrame，确保元素的初始状态已经被提交到渲染树后再修改类，兼容性也很好：

document.body.insertBefore(modalWrapper, document.body.firstChild)
requestAnimationFrame(() => {
  // 第二次requestAnimationFrame会进入下一帧，初始状态已渲染完成
  requestAnimationFrame(() => {
    modalWrapper.classList.remove('invisible')
  })
})

更优的实现方案 #

如果不想处理类切换的时序问题，可以直接用CSS关键帧动画实现入场效果，不需要依赖初始状态的类切换，插入元素时直接添加对应类即可自动执行动画，完全不会出现时序问题：

@keyframes modalFadeIn {
  from {
    opacity: 0;
    visibility: hidden;
  }
  to {
    opacity: 1;
    visibility: visible;
  }
}
@keyframes modalSlideUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.modal-wrapper {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  /* 背景淡入动画 */
  animation: modalFadeIn 0.4s ease forwards;
}
.modal-inner {
  width: 400px;
  margin: 10vh auto;
  background: #fff;
  border-radius: 8px;
  /* 弹窗上浮动画 */
  animation: modalSlideUp 0.3s ease 0.1s forwards;
}

这种实现方式不需要在JS中处理类切换的时序，插入元素后不需要额外操作即可正常播放动画，维护成本更低。

内容的提问来源于stack exchange，提问作者Obsidian