怎么做到5秒后CSS自动隐藏元素?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (362)

是否可以在页面加载5秒后隐藏元素? 希望通过CSS转换获得相同的结果。

有什么创新的想法吗?还是我的问题超出了CSS过渡/动画的限制?

提问于
用户回答回答于

是的

但是你不能以你可能立即想到的方式去做,因为你不能围绕你所依赖的属性动画或创建一个转换。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>
用户回答回答于

可以试试淡出:

$(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>

扫码关注云+社区

领取腾讯云代金券