主页 / 问题 / 939044
Accepted
corocoto
Asked:2020-01-31 20:27:55 +0000 UTC2020-01-31 20:27:55 +0000 UTC

页面加载时平滑消失的预加载器

  • 772

我正在尝试实现跟踪的消失。方式，但不透明度立即变为0

window.onload = function() {
        const loader = document.getElementById('page-preloader');
        setInterval(() => loader.style.opacity -= 0.01, 1000);
        if (loader.style.opacity==0) clearInterval();
};
javascript

3 个回答

  1. Best Answer

    最初，您没有opacity分别设置 sv-in ，当减少为数字时，它立即变为 0。

    opacity最初设置属性：

    const loader = document.getElementById('page-preloader');
const interval = setInterval(() => {
  loader.style.opacity -= 0.01;
  if (loader.style.opacity==0) clearInterval(interval);
}, 10);
    #page-preloader{
  width: 50px;
  height: 50px;
  background: black;
}
    <div style="opacity: 1" id="page-preloader"></div>

    或者引入一个额外的变量：

    const loader = document.getElementById('page-preloader');
let opas = 1;
const interval = setInterval(() => {
  opas -= 0.01;
  loader.style.opacity = opas;
  if (opas == 0) clearInterval(interval);
}, 10);
    #page-preloader{
  width: 50px;
  height: 50px;
  background: black;
}
    <div id="page-preloader"></div>

    • 1

  2. 试试这样：

    var loader = document.getElementById("loader");
var timer = setInterval(function() {
	loader.style.opacity -= 0.01;
	if (loader.style.opacity == 0)
		clearInterval(timer);
}, 100);
    #loader {
  width: 200px;
  height: 200px;
  background-color: black;
}
    <div id="loader" style="opacity:1;"></div>

    • 1

  3. 作为在css.

    $(function() {
  const loader = document.getElementById('page-preloader');
  loader.classList.add('hide-loader');
});
    #page-preloader {
  width: 50px;
  height: 50px;
  background: black;
  opacity: 1;
  transition: opacity 1s ease;
}

#page-preloader.hide-loader {
  opacity: 0;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="page-preloader"></div>

    • 1

相关问题