Javascript 在我的扩展名'；s popup.html

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

My init函数从chrome存储器读取值，并将按钮设置在正确的位置。之后，它会将一个新类添加到我的复选框中，该复选框的转换时间设置为0.4s。如果我将setTimeout中的最后一步换行为0ms，它就会起作用，但是如果我不使用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;
}

---

使用setTimeot时，函数不会立即执行。它进入异步调用队列，并将在引擎不忙于同步代码时执行。所以这个延迟给你的css作品一些时间。

---

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

---

如果你想在这种情况下拥有控制权，你需要使用transitionend事件

你能不能用css将其初始隐藏？@johnSmith我可以将其隐藏，但是popup.html将加载而不显示任何按钮，而不是转换动画“popping”，我将使用整个按钮“popping”。使用setTimeout（）成功地解决了这个问题，我只是想了解为什么在没有使用setTimeout的情况下不同时运行timeout at zero。在现代浏览器中，零超时从来都不是零。如果当前执行的事件循环滴答声花费了这么长的时间，甚至可能是一秒钟。你能不能用css初步隐藏它？@johnSmith我可以隐藏它，但是popup.html加载时根本没有可见的按钮，而不是转换动画“popping”，我会用整个按钮“popping”。使用setTimeout（）成功地解决了这个问题，我只是想了解为什么在没有使用setTimeout的情况下不同时运行timeout at zero。在现代浏览器中，零超时从来都不是零。如果当前执行的事件循环滴答声花费了这么长的时间，它甚至可能是一秒钟。