Question

几年前，我们在网页上为阻止JS的用户添加了说明。我真的希望该注释对于使用JS的人保持隐藏。音符的可见性取决于主体为body class="noJS"类。为了尽可能快地删除它，我在主体标签中的第一项中有一个JS，它不依赖于任何东西，而是立即触发。

<!-- 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");
}

Answer 1

您尝试使用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");
}

Answer 2

这应该为您提供所需的淡入效果。动画开始时，动画会延迟推迟，因此您可能最终会出现元素，然后突然消失，只是再次淡出。如果您立即开始制作动画，但从opacity: 0开始，然后在1s（持续2s的50％）后淡出动画，那么您应该得到想要的效果。

@keyframes fade-in {
  0% {opacity: 0}
  50% {opacity: 0}
  100% {opacity: 1}
}

.anim-fade-in {
  animation-name: fade-in;
  animation-duration: 2s;
}

<p class="anim-fade-in">Some content</p>

值得一提的是，此方法仅使用不透明度隐藏元素，因此您可能会发现页面内容随着元素本身的存在而移动，然后再被删除。您可以尝试在其中滑动元素。

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

2 个答案: