TA貢獻(xiàn)1805條經(jīng)驗 獲得超10個贊
您可以嘗試將其添加到 CSS 中，看看它是否具有優(yōu)先級：
.header, .header-wrapper {
animation: pop 2s;
}
@keyframes pop
{
0%{transform:scale(0);}
100%{transform:scale(0);}
}
TA貢獻(xiàn)1848條經(jīng)驗 獲得超10個贊
另一種方法是：
//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>
TA貢獻(xiàn)1856條經(jīng)驗 獲得超11個贊
您可以像這樣使用 CSS 類：
隱藏某個類，將該類應(yīng)用于您的元素。
為了平滑過渡，請transition為隱藏類上設(shè)置的屬性指定 -property。
加載時，使用 刪除所述類setTimeout()。
您甚至還可以使用自定義屬性來指定延遲，在此之后應(yīng)刪除其“隱藏類”！
執(zhí)行此操作時，請確保在未指定屬性時使用后備值。
這樣，您可以在不同的延遲后顯示多個元素，所有這些都在 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 <div> should always be visible.</p>
</div>
<div class="onload-hidden" data-delay="4000">
<h1>Initially hidden - 1</h1>
<p>This <div> should only be visible after a set delay!</p>
</div>
<div class="onload-hidden" data-delay="500">
<h1>Initially hidden - 2</h1>
<p>This <div> should only be visible after a set delay!</p>
</div>
舉報