Javascript Css转换仅在超时函数中显示

我使用JavaScript创建了新的div，并设置了它的宽度和高度。紧接着，我需要调整到100%的过渡效果宽度。但它仅在样式编辑在超时函数内时显示。没有这一点，它只是跳转到新的宽度

Css:

脚本：

  var detailContainer = document.createElement("div");
  detailContainer.id = "project-detail";
  detailContainer.innerHTML = previewContent.innerHTML;
  detailContainer.style.width = previewWidth;
  detailContainer.style.height = previewHeight;

  blocksContainer.appendChild(detailContainer);

  for (let project of source.projects) {
    if(project.id == projectID) {
      setTimeout(function () {
        detailContainer.style.width = "100%";
      }, 1);
    }
  }

---

JS是单线程的，如果将宽度更改为20，然后再更改为100，那么更改为20就像没有发生一样。因此，您需要使用setTimeout（），它首先将其更改为20，“之后”将其更改为100

我曾尝试使用JS执行类似的操作，甚至阅读了大量有关CSS类的文章，并理解，使用CSS类执行类似操作更好。尝试在操作时切换类：

for (let project of source.projects) {
    if(project.id == projectID) {
      detailContainer.className += ' fullwidth-class';
    }
}

并添加相同的CSS类：

.fullwidth-class {
    width: 100%!important;
}
#project-detail {
    animation-duration: 1s;
}

---

我相信这是因为您将div附加到DOM，然后立即（下一行代码）将其调整为100%宽度

问题是，在页面的生命周期中，CSS没有时间在这两行代码之间追赶和应用。因此，过渡持续时间尚未应用，并且您已经调整了div的大小，因此它会立即跳到100%

---

另一方面，当您设置一个异步超时时，超时内的函数将在执行堆栈的末尾执行，也就是说，在将CSS规则应用于新创建的元素之后。您甚至可以设置一个0延迟或根本不延迟，它仍然可以工作

好的，谢谢你的解释！我花了大约四个小时才意外地找到这个解决方案。。现在至少我知道它是怎么工作的了：）很高兴我帮了忙！这是否值得投票并接受答案？：）

.fullwidth-class {
    width: 100%!important;
}
#project-detail {
    animation-duration: 1s;
}