时间戳

首页 > 解决方案 > 如何使用 Javascript 淡出元素

javascript - 如何使用 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：

    <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。感谢所有的帮助！

标签： javascripthtmlcssfade

解决方案

您可以使用 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()函数将切换fade-in-out基于的类value，并且将有一个过渡以“淡入”和淡出 div，并添加pointer-events: none以使 div 非交互式惠斯特过渡。

推荐阅读