我想在播放一个弹出窗口时将标题隐藏 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 class

setTimeout(() => {

  document.querySelector('#header').className = "headerShow headerHide"

},4500)

/* CSS */

body {

 background: black;

}

 .headerHide {

    display: none

  }

  .headerShow {

    display: block;

    background: red;

    position: absolute;

    width: 100vw;

    text-align: center;

    font-size: 30px;

    top: 0

  }

 /* HTML */

<header id='header' class='headerHide'>Header</header>

Answer 3

您可以像这样使用 CSS 类：

1. 隐藏某个类，将该类应用于您的元素。

2. 为了平滑过渡，请transition为隐藏类上设置的属性指定 -property。

3. 加载时，使用 删除所述类setTimeout()。

您甚至还可以使用自定义属性来指定延迟，在此之后应删除其“隐藏类”！
执行此操作时，请确保在未指定属性时使用后备值。

这样，您可以在不同的延迟后显示多个元素，所有这些都在 HTML 中指定。

for (let el of document.querySelectorAll('.onload-hidden')) {

  setTimeout(() => el.classList.remove('onload-hidden'),

      el.getAttribute('data-delay') || 1000); // Specified delay, or fallback-delay

}

.onload-hidden {

  visibility: hidden;

  opacity: 0;

}

div {

  transition: 1s;

}

<div>

  <h1>Always shown</h1>

  <p>This &lt;div&gt; should always be visible.</p>

</div>

<div class="onload-hidden" data-delay="4000">

  <h1>Initially hidden - 1</h1>

  <p>This &lt;div&gt; should only be visible after a set delay!</p>

</div>

<div class="onload-hidden" data-delay="500">

  <h1>Initially hidden - 2</h1>

  <p>This &lt;div&gt; should only be visible after a set delay!</p>

</div>