如何使用 Javascript 淡出元素

Question

我有一个加载页面是我用 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:

    <div id="loading">
      <div class="logo">
        <a href="index.html">Logo</a>
      </div>
      <span class="loading-center-cross"></span>
      <h3>Loading...</h3>
    </div>

    <div id="page">
.....
    </div>

我希望加载屏幕会如前所述淡入 index.html。感谢大家的帮助！

Answer 1

您可以使用 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：

#page,
#loading {
  transition: opacity 1s;
}

.fade-in-out {
  opacity: 0;
  pointer-events: none;
}

这样，show() 函数将根据 value 切换 fade-in-out 的 class，并且会过渡到 'fade' div 进出，加上 pointer-events: none 使 div 非交互式惠斯特过渡。

如何使用 Javascript 淡出元素

How to Fade Out an element using Javascript

html

javascript

css

fade