如何实现点击子页面链接时的页面平滑过渡效果？

纯CSS没法单独实现页面跳转的平滑过渡——因为浏览器加载新页面时会直接销毁当前页面，白屏是浏览器的默认加载行为。不过我们可以用CSS配合JavaScript模拟出平滑过渡效果，解决生硬刷新和白屏问题。

实现思路 #

1. 给当前页面添加淡出动画，点击导航链接时触发该动画
2. 等待动画结束后再跳转到目标页面
3. 给新页面添加淡入动画，消除加载时的白屏突兀感

修改后的完整代码 #

1. CSS样式（单独存为styles.css，所有页面都要引入）

/* 全局基础重置，确保动画全屏生效 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  opacity: 1;
  transition: opacity 0.5s ease; /* 新页面淡入过渡 */
}

/* 点击链接时触发的页面淡出类 */
body.fade-out {
  opacity: 0;
}

/* 导航栏基础样式（可根据你的需求调整） */
.menu_navbar ul {
  list-style: none;
  display: flex;
  background-color: #333;
}

.menu_navbar ul li {
  position: relative;
  padding: 1rem 1.5rem;
}

.menu_navbar ul li a {
  color: #fff;
  text-decoration: none;
}

/* 子菜单样式 */
.sub_menu_navbar_1 {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #444;
  display: none;
}

.menu_navbar ul li:hover .sub_menu_navbar_1 {
  display: block;
}

.sub_menu_navbar_1 ul li {
  padding: 0.8rem 1.2rem;
  white-space: nowrap;
}

2. HTML页面（所有页面都要添加相同的JS代码）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Navigation Demo</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
 <div class="menu_navbar">
    <ul>
      <li><a href="website.html">Home</a></li>
      <li><a href="gallery_page.html">Gallery</a></li>
      <li><a href="artist_page.html">The Artist</a></li>
      <li><a href="contact_page.html">Contact</a></li>
      <li><a href="#">About</a>
        <div class="sub_menu_navbar_1">
          <ul>
            <li><a href="about-shop_page.html">The Shop</a></li>
            <li><a href="about-events_page.html">Events</a></li>
          </ul>
        </div>
      </li>
    </ul>    
  </div>

  <script>
    // 筛选所有非锚点的站内导航链接
    const navLinks = document.querySelectorAll('.menu_navbar a[href]:not([href="#"])');

    navLinks.forEach(link => {
      link.addEventListener('click', function(e) {
        // 阻止浏览器默认跳转行为
        e.preventDefault();
        const targetUrl = this.getAttribute('href');

        // 添加淡出类，触发页面消失动画
        document.body.classList.add('fade-out');

        // 等待动画结束后跳转（时间要和CSS的transition时长一致）
        setTimeout(() => {
          window.location.href = targetUrl;
        }, 500);
      });
    });

    // 页面加载完成后移除淡出类，处理浏览器后退的情况
    window.addEventListener('load', () => {
      document.body.classList.remove('fade-out');
    });
  </script>
</body>
</html>

关键注意事项 #

• 动画时长匹配：CSS中transition的时长（0.5s）和JS中setTimeout的延迟时间（500ms）必须保持一致，确保动画结束后再跳转。
• 全局生效：所有页面都要引入相同的CSS和JS代码，不然新页面的淡入效果会失效。
• 锚点链接排除：代码里用:not([href="#"])跳过了About的锚点链接，避免点击它触发不必要的跳转逻辑。

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