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

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 水平移动时，下一个 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>