DOM 元素在 JS 转换完成后才呈现在页面上

Question

标题说明了一切。要查看问题，请将此代码复制到以下在线编译器：https://www.w3schools.com/php/phptryit.asp?filename=tryphp_compiler

<!DOCTYPE HTML>
<html>

<style>
        /*MAIN*/

        * {
            margin: 0;
            padding: 0;
            user-select: none;
            overflow: hidden;
        }

        body {
            background-color: #FF0000;
            margin: 0;
            padding: 0;
        }


        /*ELEMENTS*/

        div {
            width: 100vw;
            height: 100vh;
            float: left;
            margin-left: 0vw;
        }

        h1 {
            font-family: verdana;
            font-size: 5vh;
            text-transform: uppercase;
        }

        h1.white {
            color: #F4F4F4;
        }

</style>

<body>
    
    <div id = "main" style = "width: auto; margin-left: 0vw;">
        
        <div id = "home" class = "container" style = 'background-color: #000000;'>
            
            <h1 class = "white">click arrow to see how the next page doesn't appear until after the transition is complete</h1>
                            
            <!--ARROW BUTTON-->
            <p id = 'arrowButton' style = 'color: #FFFFFF; position: absolute; height: 10vh; width: auto; margin: 45vh 0 0 75vw; font-size: 3vh;' onMouseDown = 'NextButtonClick();'>--></p>
            
        </div>
        
        <div id = "welcome" class = "container" style = 'background-color: #FFFFFF;'>
                
            <h1 style = 'margin: 47.5vh 0 0 50vw'>welcome to my portfolio</h1>
            
        </div>
        
    </div>
    
    <script>
        var mainDiv, welcomeDiv;
            var transitionSeconds = 0.5;
            var isTransitioning = false;
            
            function NextButtonClick() {
                if(!isTransitioning) {
                    isTransitioning = true;
                    
                    i = 0;
                    thisInterval = setInterval(function() {
                        mainDiv.style.marginLeft = (100 / i) - 101 + "vw";
                        
                        i++;
                        if(i == 100) {
                            clearInterval(thisInterval);
                            mainDiv.style.marginLeft = "-100vw";
                            isTransitioning = false;
                        }
                    }, transitionSeconds);
                }
            }
            
            window.onload = function() {
                mainDiv = document.getElementById("main");
                welcomeDiv = document.getElementById("welcome");
                
                var arrowButton = document.getElementById("arrowButton");
                var arrowButtonX, arrowButtonY;
                var arrowButtonGlowDistance = 100;
                
                arrowButtonX = arrowButton.getBoundingClientRect().left + arrowButton.getBoundingClientRect().width/2;//center
                arrowButtonY = arrowButton.getBoundingClientRect().top + arrowButton.getBoundingClientRect().height/2;//center
                
                document.onmousemove = function(e) {
                    x = e.clientX; y = e.clientY;
                };
            };
    </script>
    
</body>
</html>

背景是红色的，这样你就可以看到，即使“欢迎”div 应该呈现在背景之上，它直到过渡后的最后一秒才被呈现已完成且 100% 的元素显示在屏幕上。

我很困惑，我不确定为什么会这样，因为 HTML 通常似乎不会这样做。即使我在 Inspect Element 中突出显示元素，Inspector 也不会显示元素在屏幕上的位置，直到它被渲染的最后一刻。

如有任何帮助，我们将不胜感激，我期待听到您的反馈！

Answer 1

这里的问题是你的 DIV 是相互放置的，当一个水平移动时，下一个 div 仍然在它下面，直到第一个完全不碍事（就像 Jenga 游戏一样相反）。要解决这个问题，您可以尝试添加 display: flex，将它们水平放置：

var mainDiv, welcomeDiv;
var transitionSeconds = 0.5;
var isTransitioning = false;

function NextButtonClick() {
  if (!isTransitioning) {
    isTransitioning = true;

    i = 0;
    thisInterval = setInterval(function() {
      mainDiv.style.marginLeft = (100 / i) - 101 + "vw";

      i++;
      if (i == 100) {
        clearInterval(thisInterval);
        mainDiv.style.marginLeft = "-100vw";
        isTransitioning = false;
      }
    }, transitionSeconds);
  }
}

window.onload = function() {
  mainDiv = document.getElementById("main");
  welcomeDiv = document.getElementById("welcome");

  var arrowButton = document.getElementById("arrowButton");
  var arrowButtonX, arrowButtonY;
  var arrowButtonGlowDistance = 100;

  arrowButtonX = arrowButton.getBoundingClientRect().left + arrowButton.getBoundingClientRect().width / 2; //center
  arrowButtonY = arrowButton.getBoundingClientRect().top + arrowButton.getBoundingClientRect().height / 2; //center

  document.onmousemove = function(e) {
    x = e.clientX;
    y = e.clientY;
  };
};

* {
  margin: 0;
  padding: 0;
  user-select: none;
  overflow: hidden;
}

body {
  background-color: #FF0000;
  margin: 0;
  padding: 0;
}


/*ELEMENTS*/

div {
  width: 100vw;
  height: 100vh;
  float: left;
  margin-left: 0vw;
  display: flex; /* added */ 
}

h1 {
  font-family: verdana;
  font-size: 5vh;
  text-transform: uppercase;
}

h1.white {
  color: #F4F4F4;
}

<div id="main" style="width: auto; margin-left: 0vw;">

  <div id="home" class="container" style='background-color: #000000;'>

    <h1 class="white">click arrow to see how the next page doesn't appear until after the transition is complete</h1>

    <!--ARROW BUTTON-->
    <p id='arrowButton' style='color: #FFFFFF; position: absolute; height: 10vh; width: auto; margin: 45vh 0 0 75vw; font-size: 3vh;' onMouseDown='NextButtonClick();'>--></p>

  </div>

  <div id="welcome" class="container" style='background-color: #FFFFFF;'>

    <h1 style='margin: 47.5vh 0 0 50vw'>welcome to my portfolio</h1>

  </div>

</div>

DOM 元素在 JS 转换完成后才呈现在页面上

DOM Element Not Rendering on Page Until After JS Transition Completion

html

javascript

css

rendering

element