如何为Neocities网站实现页面间的反向滑动切换过渡效果

嘿，我太懂你在Neocities上折腾页面过渡的痛苦了——淡入淡出已经看腻，想搞滑动却碰了一鼻子灰，尤其是后退页面时JS直接罢工的问题，我给你整了一个新手友好、完全适配Neocities的方案，一步步来，保证你能搞定！

核心思路 #

因为Neocities是纯静态站点，没法用服务器端逻辑，咱们就靠前端三件套+localStorage来实现：

1. 拦截站内链接点击，先播放当前页面的滑出动画，再跳转
2. 把当前页的滑出方向存在localStorage里，让下一页知道该从哪个反向滑入
3. 处理浏览器后退/前进的情况，确保反向过渡依然生效

第一步：统一所有页面的HTML结构 #

所有页面的内容都要塞进一个固定的容器里，这样才能整体控制滑动。每个页面都这么写：

<!DOCTYPE html>
<html>
<head>
  <!-- 这里放你的CSS样式 -->
  <style>
    /* 后面的CSS代码会放在这里 */
  </style>
</head>
<body>
  <!-- 所有页面内容都套在这个容器里 -->
  <div id="page-container">
    <!-- 比如你的导航栏、正文、页脚全放这儿 -->
    <h1>我的首页</h1>
    <a href="page2.html" data-direction="left">去第二页（左滑出）</a>
    <a href="page3.html" data-direction="right">去第三页（右滑出）</a>
  </div>

  <!-- 把JS放在body最后，确保页面元素加载完再执行 -->
  <script>
    /* 后面的JS代码会放在这里 */
  </script>
</body>
</html>

第二步：写滑动动画的CSS #

先定义滑入滑出的关键帧，还有对应的类，这里先做左右滑动的，上下滑动你可以照着改：

/* 页面容器基础样式：占满整个屏幕，固定定位避免滚动干扰 */
#page-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  padding: 20px; /* 留内边距避免内容贴边 */
  box-sizing: border-box;
}

/* 滑出动画：左滑消失 */
@keyframes slideOutLeft {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

/* 滑入动画：从右进来（对应上一页左滑出的反向） */
@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

/* 滑出动画：右滑消失 */
@keyframes slideOutRight {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

/* 滑入动画：从左进来（对应上一页右滑出的反向） */
@keyframes slideInLeft {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

/* 动画控制类：时长和CSS动画保持一致，forwards让动画停在最后一帧 */
.slide-out-left {
  animation: slideOutLeft 0.5s forwards;
}
.slide-in-right {
  animation: slideInRight 0.5s forwards;
}
.slide-out-right {
  animation: slideOutRight 0.5s forwards;
}
.slide-in-left {
  animation: slideInLeft 0.5s forwards;
}

要是想做上下滑动，就把translateX改成translateY，比如slideOutUp是translateY(-100%)，slideInDown是translateY(100%)，逻辑完全一样。

第三步：实现逻辑的JS代码（逐行给你讲明白） #

把这段代码放在每个页面的<script>标签里：

// 先拿到页面容器元素
const pageContainer = document.getElementById('page-container');

// 1. 页面加载时：根据上一页的滑出方向，做反向滑入
window.addEventListener('load', () => {
  // 从localStorage取上一页的滑出方向
  const exitDirection = localStorage.getItem('pageExitDirection');
  if (exitDirection === 'left') {
    // 上一页左滑没了，当前页从右滑进来
    pageContainer.classList.add('slide-in-right');
  } else if (exitDirection === 'right') {
    // 上一页右滑没了，当前页从左滑进来
    pageContainer.classList.add('slide-in-left');
  }
  // 用完就删掉，避免下次加载重复用
  localStorage.removeItem('pageExitDirection');
});

// 2. 拦截站内链接点击：先滑出再跳转
document.addEventListener('click', (e) => {
  // 找到被点击的链接（包括嵌套在其他元素里的链接）
  const link = e.target.closest('a');
  // 只处理本站内的链接，且不是新窗口打开的
  if (link && link.host === window.location.host && !link.target) {
    e.preventDefault(); // 阻止默认跳转行为
    const targetUrl = link.href;

    // 读取链接上的data-direction属性，没写的话默认左滑出
    const slideDirection = link.dataset.direction || 'left';
    // 给容器加滑出动画类
    pageContainer.classList.add(`slide-out-${slideDirection}`);

    // 等动画播完再跳转（时间要和CSS里的0.5s一致，就是500毫秒）
    setTimeout(() => {
      // 把当前页的滑出方向存起来，给下一页用
      localStorage.setItem('pageExitDirection', slideDirection);
      // 跳转到目标页面
      window.location.href = targetUrl;
    }, 500);
  }
});

// 3. 处理浏览器后退/前进：保证反向过渡依然生效
window.addEventListener('popstate', () => {
  const exitDirection = localStorage.getItem('pageExitDirection');
  if (exitDirection === 'left') {
    // 后退时，上一页是左滑出的，现在从左滑回来
    pageContainer.classList.add('slide-in-left');
  } else if (exitDirection === 'right') {
    // 后退时，上一页是右滑出的，现在从右滑回来
    pageContainer.classList.add('slide-in-right');
  }
  localStorage.removeItem('pageExitDirection');
});

给你拆解下关键逻辑：

• 用localStorage存滑出方向，就像给下一页留了个小纸条，告诉它“我是往左走的，你从右边进来”
• 拦截链接点击是为了先播动画再跳转，不然页面直接跳走，用户看不到动画
• 监听popstate事件是处理浏览器的后退/前进按钮，不然点后退的时候会直接跳页，没有过渡

新手自定义小技巧 #

1. 给不同链接设置不同滑出方向：只要给链接加data-direction="right"或者data-direction="left"就行，比如<a href="about.html" data-direction="right">关于我</a>
2. 调整动画速度：把CSS里的0.5s改成0.3s（更快）或者0.8s（更慢），记得JS里的500毫秒也要改成对应的数值（0.3s是300，0.8s是800）
3. 添加上下滑动：照着左右的代码改关键帧和类名，比如slide-out-up、slide-in-down，然后给链接加data-direction="up"

内容来源于stack exchange