当前位置：首页 > 文章列表 > 文章 > 前端 > CSS分页切换动画实现教程

CSS分页切换动画实现教程

2025-11-01 22:21:35 0浏览收藏

1. 基础结构与样式

先搭建分页容器和每一页的基本结构：


  第一页内容
  第二页内容
  第三页内容

设置容器为相对定位，每一页绝对定位叠在一起：

.pagination-container {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
}

.page.active {
  opacity: 1;
  visibility: visible;
}

2. 定义切换动画

使用 @keyframes 创建滑入和滑出效果。比如从右向左切换：

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

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

将动画应用到 active 状态，并指定方向：

.page.slide-in {
  animation: slideIn 0.5s ease-in-out;
}

.page.slide-out {
  animation: slideOut 0.5s ease-in-out;
}

3. JavaScript 控制切换逻辑

用 JS 添加和移除动画类，实现平滑过渡：

function goToPage(pageNum) {
  const pages = document.querySelectorAll('.page');
  const currentPage = document.querySelector('.page.active');
  const nextPage = document.querySelector(`[data-page="${pageNum}"]`);

  if (!nextPage || currentPage === nextPage) return;

  // 添加动画类
  currentPage.classList.add('slide-out');
  nextPage.classList.add('slide-in', 'active');

  // 动画结束后清理类
  setTimeout(() => {
    currentPage.classList.remove('active', 'slide-out');
    nextPage.classList.remove('slide-in');
  }, 500);
}

调用 goToPage(2) 即可切换到第二页，带有滑动动画。