如何在JavaScript调用appendChild后执行代码触发CSS过渡？

我曾查阅过《Javascript appendChild callback?》相关话题，该案例中目标元素为video，采用loadedmetadata事件作为解决方案。但我的场景中是一个div类型的snackbar：原本期望执行appendChild将snackbar添加到body后，替换CSS类Snackbar-Transition__HiddenState为Snackbar-Transition__DisplayingState以触发CSS过渡，然而代码执行后过渡瞬间完成，无动画效果；添加setTimeout延迟500ms后过渡可正常生效，但延迟时长难以确定，过长会导致卡顿，过短可能无效。由于appendChild无回调函数，请问有什么替代方案？

原代码示例：

document.querySelector("body").appendChild(snackbar);
snackbar.style.transitionDuration = `${ displayingDuration__seconds }s`;
snackbar.classList.remove("Snackbar-Transition__HiddenState");
snackbar.classList.add("Snackbar-Transition__DisplayingState");

加延迟的代码示例：

document.querySelector("body").appendChild(snackbar);

setTimeout(
  () => {
    snackbar.style.transitionDuration = `${ displayingDuration__seconds }s`;
    snackbar.classList.remove("Snackbar-Transition__HiddenState");
    snackbar.classList.add("Snackbar-Transition__DisplayingState");
  },
  500
);

可行替代方案 #

1. 使用requestAnimationFrame（最简便） #

利用浏览器的重绘调度机制，在下一次页面重绘前执行类名切换，无需硬编码延迟：

document.querySelector("body").appendChild(snackbar);
// 等待浏览器完成元素渲染后执行过渡逻辑
requestAnimationFrame(() => {
  snackbar.style.transitionDuration = `${displayingDuration__seconds}s`;
  snackbar.classList.remove("Snackbar-Transition__HiddenState");
  snackbar.classList.add("Snackbar-Transition__DisplayingState");
});

原理：appendChild仅将元素加入DOM树，但浏览器尚未完成布局与绘制。requestAnimationFrame会在浏览器下一次重绘前触发回调，此时元素已完成渲染，类名变更能正确触发CSS过渡。

2. 用MutationObserver监听DOM插入 #

通过监听body的子元素变化，精准捕捉snackbar被添加的时机：

const observer = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    if (mutation.addedNodes.includes(snackbar)) {
      snackbar.style.transitionDuration = `${displayingDuration__seconds}s`;
      snackbar.classList.remove("Snackbar-Transition__HiddenState");
      snackbar.classList.add("Snackbar-Transition__DisplayingState");
      observer.disconnect(); // 完成后停止监听，避免内存泄漏
      break;
    }
  }
});

// 配置监听：只关注子元素的添加/移除
observer.observe(document.body, { childList: true });
document.querySelector("body").appendChild(snackbar);

优势：完全基于DOM变化触发，不会有不必要的等待，逻辑更严谨。

3. 调整CSS逻辑（从根源优化） #

提前在CSS中定义过渡规则，让元素渲染后自动响应类名变化：

/* 初始隐藏状态，提前定义过渡属性 */
.Snackbar-Transition__HiddenState {
  opacity: 0;
  transform: translateY(100%);
  transition: all var(--transition-duration) ease; /* 用CSS变量控制时长 */
}

.Snackbar-Transition__DisplayingState {
  opacity: 1;
  transform: translateY(0);
}

配合JS代码（结合requestAnimationFrame确保渲染完成）：

// 先设置过渡时长到CSS变量
snackbar.style.setProperty('--transition-duration', `${displayingDuration__seconds}s`);
document.querySelector("body").appendChild(snackbar);

requestAnimationFrame(() => {
  snackbar.classList.remove("Snackbar-Transition__HiddenState");
  snackbar.classList.add("Snackbar-Transition__DisplayingState");
});

好处：将过渡逻辑与JS解耦，代码更易维护，同时避免依赖定时器或DOM监听的复杂性。

内容的提问来源于stack exchange，提问作者Takeshi Tokugawa YD