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

根据@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 秒为 opacity 属性设置动画。 如果要更改长度，请务必进行数学运算，在这种情况下，5 秒的 90% 留给我们 0.5 秒的时间来为不透明度设置动画。

Answer 3

当然可以，只需使用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 4

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