时间戳

首页 > 解决方案 > 使用 CSS 动画在页面加载后将元素隐藏 n 秒

javascript - 使用 CSS 动画在页面加载后将元素隐藏 n 秒

问题描述

几年前，我们在网页上为阻止 JS 的用户添加了一条注释。我真的很希望对那些使用 JS 的人来说保持隐藏状态。笔记的可见性依赖于具有 class 的主体body class="noJS"。为了尽快删除它，我有一个 JS 作为 body 标签中的第一个项目，它不依赖任何东西，而是立即触发。

<!-- BODY element exists! -->
<script type="text/javascript">
    /*<![CDATA[*/ 
        document.body.className = document.body.className.replace(new RegExp(\'(?:^|\\s)\'+ \'no-js\' + \'(?:\\s|$)\'), \' \'); 
    /*]]>*/ 
</script>

在 Firefox 中，我仍然看到该便笺呈红色闪烁，例如在此处的主页顶部https://www.colorperfect.com

烦人，这导致了我的问题，我可以在一秒钟延迟后使用 CSS3 动画淡入该注释吗？我想这应该可以解决它，但我从来没有对 CSS 动画做过任何事情，所以我想我会问而不是摆弄......如果这不起作用，其他想法也会受到欢迎。

编辑：

这是产生红色块的 CSS。交换背景和高度的简单问题。

body.noJS .single_navi_zeile
{
  background-color:#BB0000;
  height:12.7em;
  background-position: left 0.5em bottom 0.3em;
  background-repeat: no-repeat;
  background-image: url("../grafik/nojs.png");
}

标签： javascriptcsscss-animations

解决方案

你为此尝试过css吗？

.redBanner {
  display: none;
}
body.no-js .redBanner {
  display: block;
}

或以您的示例

body.no-js .single_navi_zeile {
  background-color:#BB0000;
  height:12.7em;
  background-position: left 0.5em bottom 0.3em;
  background-repeat: no-repeat;
  background-image: url("../grafik/nojs.png");
}

推荐阅读