為什么CSS過渡在頁面加載時不起作用？

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函數中，可以在整個頁面加載后觸發JS，包括其內容（圖像，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 個解決方案

解決方案1
2 已采納 2018-04-07 17:16:39

解決方案2
1 2018-04-07 17:22:15

為什么CSS過渡在頁面加載時不起作用？

問題描述

2 個解決方案

解決方案1 2 已采納 2018-04-07 17:16:39

解決方案2 1 2018-04-07 17:22:15

解決方案1
2 已采納 2018-04-07 17:16:39

解決方案2
1 2018-04-07 17:22:15