如何制作滑出当前页并滑入另一页的导航动画

<div class="page-container current-page">
  <!-- 当前页的内容 -->
</div>

<div class="page-container next-page">
  <!-- 下一页的内容 -->
</div>

.page-container {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.current-page {
  transform: translateX(0);
}

.next-page {
  transform: translateX(100%);
}

// 监听导航事件，例如点击导航按钮
document.getElementById('nav-button').addEventListener('click', function() {
  // 切换当前页和下一页容器的类名，实现滑动效果
  document.querySelector('.current-page').classList.remove('current-page');
  document.querySelector('.next-page').classList.add('current-page');
});