如何在 CSS 转换期间阻止在事件循环中处理其他消息

How to block processing other messages in event loop during a CSS transition?

本文关键字：循环 事件 其他 消息 处理 CSS 转换      更新时间：2023-09-26

下面是一个例子：

document.getElementById("myDiv").addEventListener("mouseover", function() {
  setTimeout(function() {
    console.log(1)
  }, 1)
})
div {
  transition: all 2s;
  position: fixed;
  top: 10px
}
div:hover {
  top: 100px;
}
<div id="myDiv">123</div>

我想做的是先显示一个CSS动画。当该动画完成后，运行一个 javascript 函数function() {console.log(1)} .但是，当我运行此代码片段时，我发现function() {console.log(1)}在动画结束之前执行。

这是否意味着 CSS 过渡独立于消息队列（事件循环）。有没有人对如何在消息队列（事件循环）中阻止其他处理消息直到 CSS 转换完成的想法？

我知道如果要注册新的回调，transitionend可以工作，但是如果消息队列中已经setTimeout注册了一些回调怎么办。我不知道如何暂时阻止它们。

您可以使用 transitionend 事件，但请注意，当输入鼠标和离开鼠标时，它将触发

var div = document.getElementById("myDiv");
div.addEventListener("transitionend", function() {
  console.log(1)
})
div {
  transition: all 2s;
  position: fixed;
  top: 10px
}
div:hover {
  top: 100px;
}
<div id="myDiv">123</div>

相关文章：