怎么做到5秒后CSS自动隐藏元素？
怎么做到5秒后CSS自动隐藏元素？
提问于 2018-07-25 08:13:46
是否可以在页面加载5秒后隐藏元素？ 希望通过CSS转换获得相同的结果。
有什么创新的想法吗？还是我的问题超出了CSS过渡/动画的限制？
回答 2
Stack Overflow用户
发布于 2018-07-25 16:57:16
可以试试淡出：
$(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>
Stack Overflow用户
发布于 2018-07-25 17:13:55
是的
但是你不能以你可能立即想到的方式去做，因为你不能围绕你所依赖的属性动画或创建一个转换。display，或更改维度并将其设置为overflow:hidden)以正确隐藏元素并防止其占用可见空间。
因此，为所讨论的元素创建一个动画，然后简单地切换。visibility:hidden;5秒后，同时将高度和宽度设置为零，以防止元素仍然占用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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100005750
复制相关文章
相似问题