带淡出效果的加载页面：如何在超时后为加载屏幕添加淡出效果

嘿，我帮你搞定这个淡出效果的问题！你的代码里有个小拼写错误，而且我们可以用CSS过渡来实现更平滑的淡出效果，比直接修改display属性要自然得多。下面是完整的修正方案：

第一步：添加CSS过渡样式 #

首先给你的加载层加上过渡效果，因为display: none无法触发动画，我们用opacity和visibility结合来实现淡出：

#loading_screen {
  /* 保留你原有的加载层样式，比如定位、背景色等 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  display: none;
  /* 核心过渡设置：0.5秒的平滑过渡 */
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* 淡出状态的样式类 */
#loading_screen.fade-out {
  opacity: 0;
  visibility: hidden;
}

第二步：修正并优化JavaScript代码 #

你的原代码里有个ID拼写错误（loadin...应该是loading_screen），同时我们修改逻辑，通过添加CSS类来触发淡出，而不是直接修改样式：

(function() {
  // 兼容新旧浏览器的页面加载事件绑定
  if (window.addEventListener) {
    window.addEventListener("load", nascondi_loading_screen, false);
  } else {
    window.attachEvent("onload", nascondi_loading_screen);
  }
})();

function mostra_loading_screen() {
  const loadingScreen = document.getElementById("loading_screen");
  loadingScreen.style.display = 'block';
  // 重置淡出状态，确保再次调用时能正常显示
  loadingScreen.classList.remove("fade-out");
}

function nascondi_loading_screen() {
  setTimeout(function() {
    const loadingScreen = document.getElementById("loading_screen");
    // 添加fade-out类触发CSS过渡
    loadingScreen.classList.add("fade-out");
    
    // 过渡结束后再隐藏元素，避免影响页面交互
    setTimeout(() => {
      loadingScreen.style.display = 'none';
    }, 500); // 这个时间要和CSS里的过渡时长保持一致
  }, 1000); // 这里是你需要的超时时间，比如1秒
}

为什么这么做？ #

• 更流畅的动画：CSS过渡比JavaScript动画性能更好，视觉效果更平滑
• 避免交互问题：过渡结束后再设置display: none，防止加载层在淡出过程中还阻挡页面点击
• 代码更易维护：把动画逻辑交给CSS，JavaScript只负责触发状态变化

内容的提问来源于stack exchange，提问作者Lorenzo