求助：如何在两个独立HTML页面间添加切换动画

我完全理解你的困扰——单页方案虽然能实现过渡，但把所有代码堆在一起确实会让文件变得臃肿不堪，完全破坏了多页面项目的结构和可读性。其实我们可以通过监听页面跳转事件+CSS动画+简单的状态标记来实现独立页面间的过渡，不需要合并代码。

下面是一套完整的实现方案，以淡入淡出过渡为例，你可以轻松扩展成滑动、缩放等其他效果：

第一步：定义通用过渡动画（两个页面都需要引入） #

先写好CSS动画样式，你可以把这段代码放在单独的transition.css文件里，然后在index.html和about.html的<head>里引入它：

/* 基础动画定义 */
.fade-out {
  animation: fadeOut 0.5s ease-out forwards;
}

.fade-in {
  animation: fadeIn 0.5s ease-in forwards;
}

/* 扩展：滑动过渡示例（可选） */
.slide-left-out {
  animation: slideLeftOut 0.5s ease-in forwards;
}

.slide-right-in {
  animation: slideRightIn 0.5s ease-out forwards;
}

/* 动画关键帧 */
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideLeftOut {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(-100%); opacity: 0; }
}

@keyframes slideRightIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* 确保页面容器占满视口，动画正常生效 */
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  overflow-x: hidden; /* 滑动过渡时需要隐藏横向滚动条 */
}

第二步：在跳转页面（index.html）中添加跳转拦截逻辑 #

在index.html的末尾（</body>前）添加这段脚本，用来拦截跳转、播放离开动画后再跳转到目标页面：

<script>
document.addEventListener('DOMContentLoaded', () => {
  // 选中所有带有data-transition属性的跳转链接
  const transitionLinks = document.querySelectorAll('a[data-transition]');
  
  transitionLinks.forEach(link => {
    link.addEventListener('click', (e) => {
      e.preventDefault(); // 阻止默认的页面跳转行为
      const targetUrl = link.href;
      const transitionType = link.dataset.transition;
      
      // 给body添加离开动画类
      document.body.classList.add(`${transitionType}-out`);
      
      // 用sessionStorage标记"正在过渡"，方便目标页面判断是否播放进入动画
      sessionStorage.setItem('isPageTransition', 'true');
      
      // 等待动画结束后再跳转（时间要和CSS动画时长一致）
      setTimeout(() => {
        window.location.href = targetUrl;
      }, 500);
    });
  });
});
</script>

然后修改你的跳转链接，加上data-transition属性指定过渡类型：

<!-- index.html中的跳转链接 -->
<a href="about.html" data-transition="fade">跳转到关于页面（淡入淡出）</a>
<!-- 或者用滑动过渡 -->
<a href="about.html" data-transition="slide-left">跳转到关于页面（左滑离开）</a>

第三步：在目标页面（about.html）中添加进入动画逻辑 #

在about.html的末尾添加这段脚本，用来判断是否需要播放进入动画：

<script>
document.addEventListener('DOMContentLoaded', () => {
  const isTransitioning = sessionStorage.getItem('isPageTransition');
  
  // 如果是从其他页面跳转过来的，播放进入动画
  if (isTransitioning) {
    // 对应fade过渡的进入动画，如果是slide-left离开，这里用slide-right-in
    document.body.classList.add('fade-in');
    
    // 动画结束后移除类，并清除sessionStorage标记（避免刷新页面时重复播放）
    setTimeout(() => {
      document.body.classList.remove('fade-in');
      sessionStorage.removeItem('isPageTransition');
    }, 500);
  }
});
</script>

为什么这个方案适合你？ #

• 完全保持页面独立性：两个HTML文件各自维护，不会出现代码堆砌的问题，可读性拉满。
• 可扩展性强：只需要新增CSS动画和对应的类名，就能实现任意过渡效果。
• 处理了边界情况：通过sessionStorage标记，避免用户直接刷新目标页面时也播放进入动画，逻辑更严谨。

如果你需要其他过渡效果，只需要修改CSS的关键帧动画，然后调整链接的data-transition属性和目标页面的进入动画类名就行啦~

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