Question

在页面加载时执行JavaScript代码时，似乎用JavaScript更改CSS属性不适用于转换。

以下是一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Test</title>
  <style>
    div {
      background: red;
      width: 300px;
      height: 300px;
      transition: 0.5s;
    }
  </style>
</head>
<body>
  <div />
  <script>
    var div = document.querySelector("div");

    // the following doesn't work as intended
    div.style.marginTop = "100px";

    // the following works fine
    /*setTimeout(() => (
    div.style.marginTop = "100px"
    ), 0);*/
  </script>
</body>
</html>

这可以通过封装对setTimeout()的调用进行的更改来解决，即使0为第二个参数。

有人能解释一下这种行为吗？

Answer 1

JavaScript代码在第一帧之前运行。并且因为渲染的第一帧已经具有更改的值，所以没有开始转换。

setTimeout(...,0)有效，因为setTimeout会创建一个回调并等待主线程空闲，这是在渲染过程之后。

Answer 2

将您的JS包含在window.onload函数中，在整个页面加载后 ，包括其内容（图片，css，脚本等等）将解决此问题。

window.onload = function () { var div = document.querySelector("div"); // the following doesn't use the transition div.style.marginTop = "100px"; // the following uses the transition /*setTimeout(() => ( div.style.marginTop = "100px" ), 0);*/ };

div { background: red; width: 300px; height: 300px; transition: 1s; }

<div />

为什么CSS转换不适用于页面加载？

2 个答案: