如何使用Javascript淡出元素

我有一个加载页面，我用javascript制作。我想能够淡出加载页面的index.html淡入淡出。我知道用jQuery可以很容易做到这一点，但我不想使用jQuery，因为我还没有在这个网站上使用它。我知道这可能是一个常见的问题，但由于大多数人使用jQuery，所以我无法为我的解决方案定制其他答案

我正在考虑编辑加载元素onReady的不透明度。或者我可以用简单的CSS来实现这一点

Javascript:

      function onReady(callback) {
          var intervalID = window.setInterval(checkReady, 1000);

          function checkReady() {
              if (document.getElementsByTagName('body')[0] !== undefined) {
                  window.clearInterval(intervalID);
                  callback.call(this);
              }
          }
      }
      function show(id, value) {
          document.getElementById(id).style.display = value ? 'block' : 'none';
      }
      onReady(function () {
          show('page', true);
          show('loading', false);
      });

HTML:

加载。。。
.....

---

我希望加载屏幕淡入index.html，如前所述。谢谢你的帮助

您可以使用CSS来实现这一点，方法如下：

function onReady(callback) {
  var intervalID = window.setInterval(checkReady, 1000);

  function checkReady() {
    if (document.getElementsByTagName('body')[0] !== undefined) {
      window.clearInterval(intervalID);
      callback.call(this);
    }
  }
}

function show(id, value) {
  document.getElementById(id).classList.toggle('fade-in-out', value);
}

onReady(function () {
  show('page', true);
  show('loading', false);
});

并具有以下CSS：

#第页，
#装载{
过渡：不透明度1s；
}
.淡入淡出{
不透明度：0；
指针事件：无；
}

---

通过这种方式，

show（）

函数将根据

值切换一类
淡入淡出
，并且将转换为“淡入淡出”div，并添加
指针事件：none
以使div非交互式whist转换。
document.getElementsByTagName（'body'）[0]
就像询问世界上是否有互联网或浏览器中是否有JS。。。这真的是你的意图吗？甚至用标签jQuery来标记这个问题？
或者我可以用简单的CSS来做这件事吗？
-是的，CSS转换会起作用-顺便说一下，前面的评论暗示了这样一个事实，即人们通常使用
document.body
，而不是你用来澄清的内容-所以当用户加载你的页面时，你会显示“加载屏幕”默认情况下-加载页面时，是否淡出屏幕？什么东西需要这么长时间才能加载，以至于需要一个加载屏幕？加载页面时，你能不能不让页面褪色？加载屏幕在大约20年前很常见，但由于用户体验不佳而被放弃。他们更喜欢渐进式渲染。
function onReady(callback) {
  var intervalID = window.setInterval(checkReady, 1000);

  function checkReady() {
    if (document.getElementsByTagName('body')[0] !== undefined) {
      window.clearInterval(intervalID);
      callback.call(this);
    }
  }
}

function show(id, value) {
  document.getElementById(id).classList.toggle('fade-in-out', value);
}

onReady(function () {
  show('page', true);
  show('loading', false);
});