如何在不占用空间的情况下隐藏x时间的html元素？

Question

我有以下页面：

<div class="background">
        <section class="statements">
            <article>
                <div class="article_background hidden" id="forge"></div>
                <p>
                    Greek Mythology states that Hephaistos was the god of blacksmiths, metalworking, carpenters,
                    craftsmen, artisans, sculptors, metallurgy, fire, and volcanoes.
                    During his lifetime he accomplished the creation of wonderous items; Achilles armor, Hermes winged
                    helmet and sandals, even going as far as to create automatons to work for him.
                </p>
            </article>
        </section>
</div>

而我想让它变得无形。我试过visibility，问题是它仍占用空间。

我和display和visibility已经做了很多尝试，但结果从来没有像我希望的那样。

我试图在纯粹的CSS中完成这个

Answer 1

这可以通过这个简单的代码设置在没有任何js的情况下解决：

.background {
        overflow: hidden;
        visibility: hidden;
        max-height: 0px;
}

.background {
        animation: visibility 0ms 4.5s both;
        -webkit-animation: visibility 0ms 4.5s both;
}

@-webkit-keyframes visibility {
        100% {
                max-height: inherit;
                visibility: visible;
        }
}

@keyframes visibility {
        100% {
                max-height: inherit;
                visibility: visible;
        }
}

由于元素在开始时高度为0且不可见，因此它们不占用将在滚动条中表示的空间，但仍然在访问时加载。

然后，在设置4.5s之后，此函数将删除限制并显示在css和html中预配置的所有内容。希望这对某人有所帮助！

Answer 2

您只需要display:none隐藏元素和display:block或display:inline（取决于您正在使用的元素类型）再次显示它。或者，您可以将display:none应用于元素，然后删除该应用程序以恢复以前的样式。

至于计时部分，您可以使用setTimeout()将其隐藏一段时间。

let theDiv = document.querySelector("div");

document.querySelector("button").addEventListener("click", function(){
  theDiv.classList.add("hidden");    // Hide the element by applying the style
  
  // Then set up a function to run 5 seconds later
  setTimeout(function(){
    theDiv.textContent = "I'm back!";
    theDiv.classList.remove("hidden"); // Remove the class that hides the element
  }, 5000);
});

.hidden { display:none; } /* Will be applied for 5 seconds */

<button>Hide the text for 5 seconds:</button>
<div>Now you see me...</div>
<div>I'll be here the whole time, but I'll move up when the element above me gets hidden and I'll move down when it comes back.</div>
<div class="hidden">You'll never see me</div>
<div>&copy; 2019</div>