如何实现网页内容的左右滑动淡入淡出动画效果-html教程-PHP中文网

如何实现网页内容的左右滑动淡入淡出动画效果

本文详解如何通过纯 css + javascript 实现多页容器间的平滑过渡动画：当前页向左滑出并淡出，下一页从右滑入并淡入，避免 display 切换导致动画中断。

本文详解如何通过纯 css + javascript 实现多页容器间的平滑过渡动画：当前页向左滑出并淡出，下一页从右滑入并淡入，避免 display 切换导致动画中断。

要实现“当前内容向左滑出+淡出、新内容从右滑入+淡入”的连贯动画，关键在于避免直接操作 display 属性——因为 display: none 会立即移除元素渲染，导致 CSS 过渡（transition）被强制中止，动画无法触发或中途失效。

正确的做法是：所有页面始终保留在 DOM 中且可见（display: block），仅通过 opacity、transform 和定位控制其视觉状态。动画完全交由 CSS transition 驱动，JS 仅负责添加/移除 class 触发状态变更。

以下是完整、可直接运行的实现方案：

✅ HTML 结构（语义清晰，支持任意数量页面）

<main class="carousel-container"><section id="0" class="page">首页内容</section><section id="1" class="page">第二页内容</section><section id="2" class="page">第三页内容</section><section id="3" class="page">尾页内容</section></main><button id="nextBtn">下一页</button>

✅ CSS 样式（核心：绝对定位 + transform 过渡）

.carousel-container {
  position: relative;
  height: 200px;
  overflow: hidden;
  border: 1px solid #ddd;
  margin-bottom: 1rem;
}

.page {
  position: absolute;
  top: 0;
  left: 50%;
  width: 90%;
  max-width: 600px;
  margin: 0 auto;
  padding: 1.5rem;
  text-align: center;
  background: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  /* 初始状态：居中显示 */
  transform: translateX(-50%);
  opacity: 1;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); /* 更自然的缓动 */
}

/* 滑出：向左平移 + 透明度归零 */
.page.fade-out {
  opacity: 0;
  transform: translateX(-150%); /* 向左完全移出视口 */
}

/* 滑入：从右侧进入并居中 */
.page.fade-in {
  opacity: 1;
  transform: translateX(50%); /* 先在右侧，再过渡到居中 */
}

/* 首页默认显示，其余隐藏（但不 display:none！）*/
.page:not(:first-child) {
  opacity: 0;
  transform: translateX(150%); /* 初始在右侧外 */
}

✅ JavaScript 逻辑（轻量、无阻塞、可复用）

let currentIndex = 0;
const totalPages = document.querySelectorAll('.page').length;

function fadeOutShowNext(currentId, nextId) {
  const currentEl = document.getElementById(currentId);
  const nextEl = document.getElementById(nextId);

  // 移除旧状态类，添加动画类
  currentEl.classList.remove('fade-in');
  currentEl.classList.add('fade-out');

  nextEl.classList.remove('fade-out');
  nextEl.classList.add('fade-in');

  // 动画结束后清理类（可选，便于调试或复用）
  setTimeout(() => {
    currentEl.classList.remove('fade-out');
    nextEl.classList.remove('fade-in');
  }, 600); // 与 CSS transition 时间一致
}

// 绑定按钮事件（示例：单按钮循环切换）
document.getElementById('nextBtn').addEventListener('click', () => {
  if (currentIndex >= totalPages - 1) {
    alert('已到最后一页！');
    return;
  }
  fadeOutShowNext(currentIndex.toString(), (++currentIndex).toString());
});

⚠️ 关键注意事项

禁止使用 display: none/block 控制显隐：它会破坏 CSS 过渡流程。应始终用 opacity + transform 控制视觉状态。
transition 必须写在基础 .page 类中，而非仅在 .fade-out/.fade-in 中——否则初始状态无过渡。
transform: translateX() 比 left 更高效：GPU 加速，无重排（reflow），动画更流畅。
时间需严格对齐：JS setTimeout 延迟必须等于 CSS transition-duration（如 0.6s → 600ms），否则状态清理过早会导致二次动画异常。
如需支持「上一页」，只需维护 currentIndex 并传入 currentIndex-1，逻辑完全对称。