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

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，问题是它仍然占用空间。

我对@9​​87654323@ 和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>