Question

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

我的初始化函数从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;
}

Answer 1

使用setTimeot时，函数不会立即执行。它到达异步调用的队列，并在引擎不忙于同步代码时执行。因此，这种延迟会给您的CSS工作带来一些时间。如果您希望在这种情况下拥有控制权，则需要使用transitionend事件

setTimeout为0ms与未在扩展程序的popup.html

1 个答案: