CSS 5秒后自动隐藏元素

Posted 2023-02-22

【中文标题】CSS 5秒后自动隐藏元素

【英文标题】：CSS Auto hide elements after 5 seconds

【发布时间】：2014-03-26 11:07:59

【问题描述】：

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

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

有什么创新的想法吗？还是我要求超出 css 过渡/动画的限制？

【问题讨论】：

有可能，但我不建议这样做。为此使用 jQuery 或纯 JS。

这里有一个例子：jsbin.com/xofaq/1/edit?html,css,output我知道已经有答案了，但我也在这样做，孩子们把我带走了一段时间:)

感谢@balexandre，为您的评论+1。

【参考方案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>

【讨论】：

不错！刚要推荐关键帧！ +1！

为什么不对不透明度进行动画处理？ opacity:1 到 0

它有效，但我有一个问题，在你的回答中，你只包括了@keyframe和@-webkit-keyframes，我想知道没有-moz和-o是否可以。只是另一个问题。我发现它只需等待 5 秒钟，然后立即隐藏元素而没有动画。我认为如果您在答案中也包含淡出过渡部分，那就太好了。

@Radian - 不透明度不会改变元素仍会占用空间的事实......只是不可见（jsfiddle.net/467bb） - 您可以看到灰色边框的 div 在 5 秒后不会在内容上折叠

太棒了！谢谢楼主！

【参考方案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 秒的时间来为不透明度设置动画。

【讨论】：

我喜欢这个解决方案。有没有办法将它组合起来，让它淡出然后从 DOM 中移除？

如果你想从 DOM 中删除它，你需要使用一些 javascript。如果您的意思是从文档流中明显删除它，那么您可以使用上面提到设置 height: 0 和 width: 0 的技术 - 但是它带有警告，因为当将高度从 0 更改为 100% 等时，它可能会导致跳跃效果，等等，同时还可以使用键盘使项目保持焦点。

【参考方案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.

【讨论】：

感谢您的回答，但我只是不想使用 javascript。如果我想使用 javascript 或 jQuery，我可以使用问题中包含的 jQuery 解决方案。还是谢谢。

请记住jQuery is not even remotely a synonym to Javascript。你要求一个不使用 jQuery 内置转换的解决方案，而我用纯 CSS 转换和一行通用 Javascript 给你一个答案。你从来没有问过没有JS的解决方案，所以答案是完整的。

@NielsKeurentjes 就像有人说没有 java 然后你给他们一个 GWT 解决方案。或者有人说没有 css，而你给出了一个 sass 解决方案。问题上的标签是 css，而不是 javascript 或 jquery。 Jquery 是 javascript 的同义词，因为它是一个围绕它的框架。

@snowe2010 不完全是。 SASS 意味着安装编译器。 GWT 意味着包括一个额外的库。 jQuery 意味着安装和加载一个额外的库。因此，我认为问题是如何仅使用普通浏览器中可用的方法来实现预期结果，这有点归结为 CSS 和纯 Javascript。这个答案中提供了这两种解决方案中最直接、最简单的解决方案。接受的答案很好，但imo不如这个干净。意见不同，答案本身并不错误。

@NielsKeurentjes 是的，只是他明确表示他知道有一个 jquery 解决方案并且他想要一个 css 解决方案。如果他知道有一个 jquery 解决方案，那么显然有一个 javascript 解决方案，因为 jquery 只是一个使 javascript 更容易的库。

【参考方案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

【讨论】：

问题是关于使用 CSS，而不是 JavaScript！