CSS自动隐藏5秒后的元素

Question

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

我想做同样的事情，但希望通过CSS过渡获得相同的结果。

任何创新的想法？或者我是否超出了css过渡/动画的限制？

Answer 1

是<！/强>

但是你不能以你可能立刻想到的方式去做，因为你无法动画或围绕你原本依赖的属性创建过渡（例如display，或者更改尺寸和设置为{ {1}}）以便正确隐藏元素并防止它占用可见空间。

因此，为相关元素创建动画，并在5秒后简单地切换overflow:hidden，同时还将高度和宽度设置为零，以防止元素仍然占用DOM流中的空间。

FIDDLE

CSS

visibility:hidden;

HTML

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;
    }
}

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

根据@ SW4的答案，您最后还可以添加一些动画。

＆＃13;

＆＃13;

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;}
}

＆＃13;

<div>
<div id='container'>
    <div id='hideMe'>Wait for it...</div>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

使剩余的0.5秒为opacity属性设置动画。 如果您正在改变长度，请确保进行数学运算，在这种情况下，5秒钟的90％会让我们在0.5秒内为不透明度设置动画。

Answer 4

为什么不尝试 fadeOut ？

＆＃13;

＆＃13;

$(document).ready(function() {
  $('#plsme').fadeOut(5000); // 5 seconds x 1000 milisec = 5000 milisec
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id='plsme'>Loading... Please Wait</div>

＆＃13;

＆＃13;

＆＃13;

fadeOut（Javascript Pure）：

How to make fadeOut effect with pure JavaScript