jquery / noscript 淡入页面答案

【问题标题】：jquery / noscript to fade a page injquery / noscript 淡入页面
【发布时间】：2017-09-16 00:56:39
【问题描述】：

这对可访问性有什么好处？我正在寻找一种（合理的）防弹解决方案，它在隐藏内容之前不会显示内容的闪光。我在这篇文章（How to fade in an entire web page -- accessibly）上尝试了公认的解决方案，它似乎运作良好 - 我错过了什么？除了doctype和charset等

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script>
        $(window).load(function() {
            $('.hidden').fadeTo(2000, 1);
        });
    </script>
    <style>
        .hidden { opacity:0; }  
        body > div { background:#ccc; position:absolute; top:20%; right:20%; bottom:20%; left:20%; padding:20px; }
    </style>
</head>
<body>
    <script>$("body").addClass("hidden");</script>
    <div>hello world</div>
</body>
</html>

【问题讨论】：

标签： jquery animation accessibility opacity fadein

【解决方案1】：

该解决方案是从 2011 年开始的，在这个时代，您可能可以使用 CSS3 处理淡入淡出过渡。 https://jsfiddle.net/px9gjdc4/

CSS

body {
  opacity: 0; /* start hidden, no flash of content */
  transition: opacity 2s; /* transition the opacity property */
}

body.reveal {
  opacity: 1;
}

HTML

<body>
  <script>
    $(function(){
      $(window).load(function(){
        // add this class once page content has loaded
        $('body').addClass('reveal');
      });
    });
  </script>
  ... 
</body>

编辑：如果您担心 JS 被禁用，您可以使用 pure CSS3 方法使用动画。 https://jsfiddle.net/px9gjdc4/2/

CSS

body {
  opacity: 0; /* start hidden, no flash of content */
  animation-name: reveal;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

@keyframes reveal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

HTML

<body>...</body>

唯一的缺点是，当您淡入时，不能保证页面已完全加载。可能值得在您的 CSS 中添加 animation-delay 属性以降低这种风险。

【讨论】：

我关心的是所有的“假设”——如果他们禁用了 javascript，所以显示永远不会作为一个类添加，所以他们什么都看不到？这就是为什么我在顶部的脚本中添加了 hidden 类