頁面加載後5秒是否可以隱藏元素？我知道有a jQuery solution。CSS 5秒後自動隱藏元素

我想做同樣的事情，但希望能得到與CSS轉換相同的結果。

任何創新的想法？還是我問超出css過渡/動畫的限制？

來源

2014-02-24 Alfred

這是可能的，但我不會推薦這樣做。使用jQuery或純JS的。 –

這裏是一個例子：http://jsbin.com/xofaq/1/edit?html,css,output 我知道這裏已經有了答案，但我也是這麼做的，孩子們把我帶走了一段時間:) – balexandre

感謝@ balexandre，+1的評論。 – Alfred

是的！

但你不能做到這一點你可能馬上會想到的辦法，因爲你不能動畫或創建周圍的特性的過渡否則你依靠（如display，或改變尺寸和設置overflow:hidden）在爲了正確隱藏元素並防止它佔據可見空間。

因此，請爲有問題的元素創建動畫，並在5秒鐘後簡單地切換visibility:hidden;，同時將高度和寬度設置爲零，以防止元素仍佔用DOM流中的空間。

FIDDLE

CSS

html, body { 
    height:100%; 
    width:100%; 
    margin:0; 
    padding:0; 
} 
#hideMe { 
    -moz-animation: cssAnimation 0s ease-in 5s forwards; 
    /* Firefox */ 
    -webkit-animation: cssAnimation 0s ease-in 5s forwards; 
    /* Safari and Chrome */ 
    -o-animation: cssAnimation 0s ease-in 5s forwards; 
    /* Opera */ 
    animation: cssAnimation 0s ease-in 5s forwards; 
    -webkit-animation-fill-mode: forwards; 
    animation-fill-mode: forwards; 
} 
@keyframes cssAnimation { 
    to { 
     width:0; 
     height:0; 
     overflow:hidden; 
    } 
} 
@-webkit-keyframes cssAnimation { 
    to { 
     width:0; 
     height:0; 
     visibility:hidden; 
    } 
}

HTML

<div id='hideMe'>Wait for it...</div>

來源

2014-02-24 16:59:04 SW4

不錯！正準備推薦關鍵幀！ +1！ – Albzi

你爲什麼不使不透明度變成動畫？'opacity：1' to 0 – Radian

它的工作原理，但我有一個問題，在你的回答中，你只包括@keyframe和@ -webkit-keyframes，我想知道沒有-moz和-o是否可以。還有一個問題。我發現它只需等待5秒鐘，並立即隱藏該元素而無需動畫。如果您在回答中包含淡出轉場部分，我認爲這會很好。 – Alfred

當然你也可以，只要使用setTimeout改變類或某事觸發過渡。

HTML：

<p id="aap">OHAI!</p>

CSS：

p { 
    opacity:1; 
    transition:opacity 500ms; 
} 
p.waa { 
    opacity:0; 
}

JS對負載或DOMContentReady運行：

setTimeout(function(){ 
    document.getElementById('aap').className = 'waa'; 
}, 5000);

Example fiddle here。

來源

2014-02-24 17:00:09

感謝您的回答，但我只是不想使用JavaScript。如果我希望使用JavaScript或jQuery，我可能會使用我在我的問題中包含的jQuery解決方案。不管怎麼說，還是要謝謝你。 – Alfred

請記住，[jQuery甚至不是遠程Javascript的同義詞]（http://meta.stackexchange.com/a/19492/219504）。你問過一個不使用jQuery內建轉換的解決方案，我給你一個純CSS轉換和一行通用Javascript的答案。你從來沒有要求沒有JS的解決方案，答案就這樣完成了。 –

投票只是爲了讓人們意識到，jQuery！= JS – msaad

爲什麼不試試fadeOut？

$(document).ready(function() { 
 
    $('#plsme').fadeOut(5000); // 5 seconds x 1000 milisec = 5000 milisec 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id='plsme'>Loading... Please Wait</div>

淡出（使用Javascript純）：

How to make fadeOut effect with pure JavaScript

來源

2016-11-28 14:51:59 KingRider

問題是關於使用CSS，而不是JavaScript！ – Mushfiq

從@ SW4的答案根據，你也可以在最後添加一個小動畫。

body > div{ 
 
    border:1px solid grey; 
 
} 
 
html, body, #container { 
 
    height:100%; 
 
    width:100%; 
 
    margin:0; 
 
    padding:0; 
 
} 
 
#container { 
 
    overflow:hidden; 
 
    position:relative; 
 
} 
 
#hideMe { 
 
    -webkit-animation: cssAnimation 5s forwards; 
 
    animation: cssAnimation 5s forwards; 
 
} 
 
@keyframes cssAnimation { 
 
    0% {opacity: 1;} 
 
    90% {opacity: 1;} 
 
    100% {opacity: 0;} 
 
} 
 
@-webkit-keyframes cssAnimation { 
 
    0% {opacity: 1;} 
 
    90% {opacity: 1;} 
 
    100% {opacity: 0;} 
 
}

<div> 
 
<div id='container'> 
 
    <div id='hideMe'>Wait for it...</div> 
 
</div> 
 
</div>

使剩餘的0.5秒到動畫的不透明度屬性。只要確保在改變長度的情況下進行數學運算，在這種情況下，5秒鐘的90％會讓我們在0.5秒內爲不透明度設置動畫。

來源

2017-04-13 16:36:35 theredforest

我喜歡這個解決方案。有沒有一種方法可以將它結合起來，然後淡出並從DOM中移除它？ –

CSS 5秒後自動隱藏元素

回答

是的！

FIDDLE

相關問題