5 秒后 CSS 自动隐藏元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21993661/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Auto hide elements after 5 seconds
提问by Alfred
Is it possible to hide element 5 seconds after the page load? I know there is a jQuery solution.
是否可以在页面加载后 5 秒隐藏元素？我知道有一个 jQuery 解决方案。
I want to do exactly same thing, but hoping to get the same result with CSS transition.
我想做完全相同的事情，但希望通过 CSS 过渡获得相同的结果。
Any innovative idea? Or am I asking beyond the limit of css transition/animation?
有什么创新的想法吗？还是我问的超出了 css 过渡/动画的限制？
回答by SW4
YES!
是的！
But you can't do it in the way you may immediately think, because you cant animate or create a transition around the properties you'd otherwise rely on (e.g. display, or changing dimensions and setting to overflow:hidden) in order to correctly hide the element and prevent it from taking up visible space.
但是您不能按照您可能立即想到的方式进行操作，因为您无法为您原本依赖的属性设置动画或创建过渡（例如display，或更改尺寸和设置为overflow:hidden）以正确隐藏元素和防止它占用可见空间。
Therefore, create an animation for the elements in question, and simply toggle visibility:hidden;after 5 seconds, whilst also setting height and width to zero to prevent the element from still occupying space in the DOM flow.
因此，为相关元素创建动画，并visibility:hidden;在 5 秒后简单地切换，同时将高度和宽度设置为零以防止元素仍然占用 DOM 流中的空间。
FIDDLE
小提琴
CSS
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
HTML
<div id='hideMe'>Wait for it...</div>
回答by theredforest
based from the answer of @SW4, you could also add a little animation at the end.
根据@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>Making the remaining 0.5 seconds to animate the opacity attribute. Just make sure to do the math if you're changing the length, in this case, 90% of 5 seconds leaves us 0.5 seconds to animate the opacity.
使剩余的 0.5 秒为不透明度属性设置动画。如果您要更改长度，请务必进行数学计算，在这种情况下，5 秒的 90% 为我们留下了 0.5 秒的不透明度动画。
回答by Niels Keurentjes
Of course you can, just use setTimeoutto change a class or something to trigger the transition.
当然可以，只是setTimeout用来改变类什么的来触发过渡。
HTML:
HTML：
<p id="aap">OHAI!</p>
CSS:
CSS：
p {
opacity:1;
transition:opacity 500ms;
}
p.waa {
opacity:0;
}
JS to run on load or DOMContentReady:
在加载或 DOMContentReady 上运行的 JS：
setTimeout(function(){
document.getElementById('aap').className = 'waa';
}, 5000);
回答by KingRider
Why not try 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>fadeOut (Javascript Pure):
淡出（纯Javascript）：
