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

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

javascript html css

Javascript 直到JS转换完成后，DOM元素才在页面上呈现,javascript,html,css,rendering,element,Javascript,Html,Css,Rendering,Element,标题说明了一切。要查看问题，请将此代码复制到以下联机编译器： /*主要*/ * { 保证金：0；填充：0；用户选择：无；溢出：隐藏； } 身体{ 背景色：#FF0000；保证金：0；填充：0； } /*元素*/ div{ 宽度：100vw；高度：100vh；浮动：左；左边距：0vw； } h1{ 字体系列：verdana；字体大小：5vh；文本转换：大写； } h1.白色{ 颜色：#F4； } 单击箭头以查看下一页如何在转换完成后才显示 --> 欢迎来到我的作品集韦尔科梅

标题说明了一切。要查看问题，请将此代码复制到以下联机编译器：


/*主要*/
* {
保证金：0；
填充：0；
用户选择：无；
溢出：隐藏；
}
身体{
背景色：#FF0000；
保证金：0；
填充：0；
}
/*元素*/
div{
宽度：100vw；
高度：100vh；
浮动：左；
左边距：0vw；
}
h1{
字体系列：verdana；
字体大小：5vh；
文本转换：大写；
}
h1.白色{
颜色：#F4；
}
单击箭头以查看下一页如何在转换完成后才显示
-->
欢迎来到我的作品集
韦尔科梅迪夫var mainDiv；
var转换秒=0.5；
var isTransitioning=假；
函数NextButtonClick（）{
if（！isTransitioning）{
isTransitioning=true；
i=0；
thisInterval=setInterval（函数（）{
mainDiv.style.marginLeft=（100/i）-101+“vw”；
i++；
如果（i==100）{
clearInterval（thisInterval）；
mainDiv.style.marginLeft=“-100vw”；
isTransitioning=false；
}
}，转换秒）；
}
}
window.onload=函数（）{
mainDiv=document.getElementById（“main”）；
welcomeDiv=document.getElementById（“欢迎”）；
var arrowButton=document.getElementById（“arrowButton”）；
变量arrowButtonX，arrowButtonY；
var arrowButtonGlowDistance=100；
arrowButtonX=arrowButton.getBoundingClientRect（）.left+arrowButton.getBoundingClientRect（）.width/2；//居中
arrowButtonY=arrowButton.getBoundingClientRect（）.top+arrowButton.getBoundingClientRect（）.height/2；//居中
document.onmousemove=函数（e）{
x=e.clientX；y=e.clientY；
};
};

背景故意是红色的，这样您就可以看到，即使“欢迎”div应该在背景上方渲染，但直到转换完成且100%的元素出现在屏幕上后的最后一秒，它才被渲染

我被难住了，我不知道为什么会这样，因为HTML通常看起来不是这样的。即使我在Inspect element中高亮显示该元素，Inspector也不会显示该元素在屏幕上的位置，直到渲染的最后一刻

任何帮助都将不胜感激，我期待着听到您的反馈

这里的问题是，你的div被放置在彼此的下方，当一个div水平移动时，下一个div仍然在它的下方，直到第一个div完全消失（就像Jenga游戏的反面）。要解决此问题，您可以尝试添加

display:flex

，将其水平放置：

var mainDiv；
var转换秒=0.5；
var isTransitioning=假；
函数NextButtonClick（）{
if（！isTransitioning）{
isTransitioning=true；
i=0；
thisInterval=setInterval（函数（）{
mainDiv.style.marginLeft=（100/i）-101+“vw”；
i++；
如果（i==100）{
clearInterval（thisInterval）；
mainDiv.style.marginLeft=“-100vw”；
isTransitioning=false；
}
}，转换秒）；
}
}
window.onload=函数（）{
mainDiv=document.getElementById（“main”）；
welcomeDiv=document.getElementById（“欢迎”）；
var arrowButton=document.getElementById（“arrowButton”）；
变量arrowButtonX，arrowButtonY；
var arrowButtonGlowDistance=100；
arrowButtonX=arrowButton.getBoundingClientRect（）.left+arrowButton.getBoundingClientRect（）.width/2；//居中
arrowButtonY=arrowButton.getBoundingClientRect（）.top+arrowButton.getBoundingClientRect（）.height/2；//居中
document.onmousemove=函数（e）{
x=e.clientX；
y=e.clientY；
};
};
*{
保证金：0；
填充：0；
用户选择：无；
溢出：隐藏；
}
身体{
背景色：#FF0000；
保证金：0；
填充：0；
}
/*元素*/
div{
宽度：100vw；
高度：100vh；
浮动：左；
左边距：0vw；
显示：flex；/*已添加*/
}
h1{
字体系列：verdana；
字体大小：5vh；
文本转换：大写；
}
h1.白色{
颜色：#F4；
}

单击箭头以查看下一页如何在转换完成后才显示
-->
欢迎来到我的作品集

<!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>