CSS 5秒后自动隐藏元素

Question

页面加载后5秒是否可以隐藏元素？我知道有a jQuery solution。

我想做同样的事情，但希望能得到与CSS转换相同的结果。

任何创新的想法？还是我问超出css过渡/动画的限制？

Answer 1

是的！

但你不能做到这一点你可能马上会想到的办法，因为你不能动画或创建周围的特性的过渡否则你依靠（如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> 

Answer 2

当然你也可以，只要使用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。

Answer 3

为什么不试试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

Answer 4

从@ 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秒内为不透明度设置动画。