HTML页面间过渡效果实现问题求助：点击链接后新页面空白无法淡入

你遇到的问题核心有两个：一是新加载的页面没有配置对应的淡入逻辑，二是链接的默认跳转和JS跳转冲突。咱们一步步来修复：

问题分析 #

1. 初始页面的淡出逻辑是正常的，但新页面加载后，你的CSS设置了body { opacity: 0; }，却没有对应的JavaScript在页面加载完成后把opacity改为1，所以新页面一直保持透明状态，看起来就是空白。
2. 你的HTML链接里同时设置了href="Netbeans_1.html"和onclick="transitionToPage('https://www.google.com')"，点击时浏览器会同时触发默认的href跳转和JS里的window.location.href跳转，这会导致页面加载行为混乱。

完整解决方案 #

1. 统一所有页面的CSS #

每个需要过渡效果的页面都要添加这段CSS（包括初始页面和目标页面）：

body {
  opacity: 0;
  /* 明确过渡属性，确保效果稳定生效 */
  transition: opacity 0.5s ease-in-out;
}

2. 统一所有页面的JavaScript #

同样，每个页面都要引入这段JS，用来处理页面加载时的淡入和点击时的淡出：

window.transitionToPage = function(href, event) {
  // 阻止链接的默认跳转行为，避免双重跳转冲突
  event.preventDefault();
  // 触发当前页面淡出
  document.querySelector('body').style.opacity = 0;
  // 等待过渡完成后执行跳转
  setTimeout(function() {
    window.location.href = href;
  }, 500);
}

// 页面加载完成后触发淡入效果
document.addEventListener('DOMContentLoaded', function() {
  // 加10ms小延迟，确保浏览器先识别初始透明状态，再触发过渡
  setTimeout(() => {
    document.querySelector('body').style.opacity = 1;
  }, 10);
});

3. 修正HTML链接代码 #

把链接的onclick改为传递事件对象，并且确保目标地址统一（比如你要跳转到Netbeans_1.html就统一用这个地址）：

<li class="waves-effect">
  <a href="Netbeans_1.html" onclick="transitionToPage('Netbeans_1.html', event)">2</a>
</li>

为什么这样能解决问题？ #

• 阻止默认跳转：通过event.preventDefault()避免了浏览器同时执行两个跳转动作，确保只有JS控制的跳转生效。
• 新页面淡入：每个页面的DOMContentLoaded事件都会把body的opacity设为1，配合CSS的过渡效果，就能实现新页面的淡入。
• 延迟触发淡入：加10ms的小延迟是为了让浏览器先渲染初始的opacity:0状态，再触发过渡，避免淡入效果被浏览器跳过。

这样调整后，就能实现你想要的：当前页面500ms淡出，新页面500ms淡入的平滑过渡效果了。

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