我想在播放一个弹出窗口时将标题隐藏 4.5 秒

Question

我有一个网站，想在播放弹出动画时隐藏标题 4.5 秒，问题是标题在动画之前加载，看起来不专业，网址是 viatgesestudiants.com 谢谢！

Answer 1

您可以尝试将其添加到 CSS 中，看看它是否具有优先级：.header, .header-wrapper {  animation: pop 2s;}@keyframes pop{  0%{transform:scale(0);}  100%{transform:scale(0);}}

Answer 2

另一种方法是：//JS// After 4.5 seconds the function runs the code and change the CSS classsetTimeout(() => {&nbsp; document.querySelector('#header').className = "headerShow headerHide"},4500)/* CSS */body {&nbsp;background: black;}&nbsp;.headerHide {&nbsp; &nbsp; display: none&nbsp; }&nbsp; .headerShow {&nbsp; &nbsp; display: block;&nbsp; &nbsp; background: red;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; width: 100vw;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; font-size: 30px;&nbsp; &nbsp; top: 0&nbsp; }&nbsp;/* HTML */<header id='header' class='headerHide'>Header</header>

Answer 3

您可以像这样使用 CSS 类：隐藏某个类，将该类应用于您的元素。为了平滑过渡，请transition为隐藏类上设置的属性指定 -property。加载时，使用 删除所述类setTimeout()。您甚至还可以使用自定义属性来指定延迟，在此之后应删除其“隐藏类”！执行此操作时，请确保在未指定属性时使用后备值。这样，您可以在不同的延迟后显示多个元素，所有这些都在 HTML 中指定。for (let el of document.querySelectorAll('.onload-hidden')) {&nbsp; setTimeout(() => el.classList.remove('onload-hidden'),&nbsp; &nbsp; &nbsp; el.getAttribute('data-delay') || 1000); // Specified delay, or fallback-delay}.onload-hidden {&nbsp; visibility: hidden;&nbsp; opacity: 0;}div {&nbsp; transition: 1s;}<div>&nbsp; <h1>Always shown</h1>&nbsp; <p>This &lt;div&gt; should always be visible.</p></div><div class="onload-hidden" data-delay="4000">&nbsp; <h1>Initially hidden - 1</h1>&nbsp; <p>This &lt;div&gt; should only be visible after a set delay!</p></div><div class="onload-hidden" data-delay="500">&nbsp; <h1>Initially hidden - 2</h1>&nbsp; <p>This &lt;div&gt; should only be visible after a set delay!</p></div>