元素CSS过渡完成后是否有回调？CSS更新时机精准获取求助

让我逐个解答你的问题：

当然有！CSS过渡完成时会触发transitionend事件，这就是专门的回调时机。你可以直接给目标元素添加这个事件的监听器，当过渡结束时就会执行对应的回调函数。

举个简单的例子：

const elem = document.querySelector('.your-element');
elem.addEventListener('transitionend', function(event) {
  console.log(`过渡完成：${event.propertyName} 属性从 ${event.oldValue} 变为 ${event.newValue}`);
  // 这里写过渡结束后的逻辑
});

需要注意的是，如果一个元素有多个过渡属性（比如同时过渡height和opacity），transitionend会为每个属性各触发一次。如果想监听所有过渡完成，可以结合计数器来判断。

你遇到的问题本质是浏览器的异步重排重绘机制：修改元素的style后，浏览器不会立即更新渲染，而是会把这些修改攒到下一次重绘周期再处理，不同浏览器的这个周期时机确实有差异，导致你的自定义函数没法精准捕捉。

这里有几个可靠的替代方案：

方案1：结合requestAnimationFrame和强制样式计算 #

requestAnimationFrame会在浏览器下一次重绘前执行回调，而访问getComputedStyle会强制浏览器立即计算元素的当前样式，触发重排。把两者结合就能精准等待样式更新完成：

async function waitUntilCSSUpdated(elem) {
  // 等待浏览器进入下一个重绘周期
  await new Promise(resolve => requestAnimationFrame(resolve));
  // 强制浏览器计算元素的样式，确保之前的style修改已生效
  getComputedStyle(elem).height; // 这里访问你修改的属性，比如height
}

方案2：双重requestAnimationFrame #

如果不需要强制计算样式，两次调用requestAnimationFrame也能确保样式已更新。第一次等待重绘前，第二次等待下一次重绘周期，此时样式已经完全应用到元素上：

async function waitUntilCSSUpdated(elem) {
  await new Promise(resolve => requestAnimationFrame(resolve));
  await new Promise(resolve => requestAnimationFrame(resolve));
}

补充说明 #

这两个方案都能跨浏览器稳定工作，因为requestAnimationFrame是浏览器标准API，行为在各浏览器中一致。另外，如果你修改的是通过CSS类而非直接style属性控制的样式，还可以用MutationObserver监听元素的class属性变化，但对于直接修改style的场景，上面的方案更简单高效。

替换你的原函数后，代码流程应该就能正常按预期执行了。

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