javascript - 在我的扩展的 popup.html 中使用 0ms 的 setTimeout 和不使用 setTimeout 之间的区别

Question

我的扩展 popup.html 页面上有一个 true/false 切换按钮。该按钮有一个 0.4 的过渡动画。有时，当打开弹出页面时，我可以看到按钮滑到其最终位置，因此我将 CSS 中的默认过渡时间设置为 0，并在 popup.html 加载后使用 JS 将其更改回 0.4。

我的 init 函数从 chrome 存储中读取值并将按钮设置在正确的位置。之后，它将一个新类添加到我的复选框，其过渡时间设置为 0.4 秒。如果我用 0ms 将最后一步包裹在 setTimeout 中，它会起作用，但如果我不使用 setTimeout 并将 querySelector 保留在同一位置，则样式应用得如此之快，以至于我可以在打开 popup.html 时再次看到它发生。我的问题是为什么会发生这种情况？ setTimeout 为零时是否也会发生同样的情况？

function init(){
   chrome.storage.sync.get(['switchState'], function(result) {
    var switchState = result.switchState;
    document.querySelector("input[type='checkbox']").checked = switchState;
    setTimeout(() => {
      document.querySelector(".slider").classList.add("animated-slider");
    }, 0);
   });
}
init();

.slider:before {
   position: absolute;
   content: "";
   height: 25px;
   width: 25px;
   left: 2.5px;
   bottom: 2.5px;
   background-color: white;
   transition: 0s;
   border-radius: 25px;
}
.animated-slider:before {
   transition: 0.4s;
}

Answer 1

当您使用setTimeot时，您的函数不会立即执行。它进入异步调用队列，并在引擎不忙于同步代码时执行。所以这个延迟给你的CSS工作一些时间。如果你想在这种情况下进行控制，你需要使用transitionend事件