仅用CSS实现带过渡/变换效果的分页组件可行吗？

当然可以！完全只靠CSS就能实现这个带滑动效果的分页面板——你只需要用到CSS过渡动画、溢出隐藏，再配合一个状态切换的触发（这个触发逻辑交给你的点击事件处理就行，视觉部分全由CSS搞定）。我给你一步步拆解怎么实现：

把所有页码放在一个横向排列的容器里，通过切换这个容器的transform属性实现左右滑动，再用overflow: hidden把超出可视区域的页码藏起来，最后加上CSS过渡让滑动过程更丝滑。

1. 搭建HTML结构 #

先把基础的分页结构写出来，包含左右控制按钮和装着所有页码的容器。我们需要一个状态类（比如.slide-to-next）来触发滑动，这个类由你的点击事件来添加/移除：

<div class="pagination">
  <button class="pagination-btn double-prev">&lt;&lt;</button>
  <button class="pagination-btn prev">&lt;</button>
  <div class="pages-wrapper">
    <span class="page-item">1</span>
    <span class="page-item">2</span>
    <span class="page-item">3</span>
    <span class="page-item">4</span>
    <span class="page-item">5</span>
    <span class="page-item">6</span>
    <span class="page-item">7</span>
    <span class="page-item">8</span>
    <span class="page-item">9</span>
    <span class="page-item">10</span>
  </div>
  <button class="pagination-btn next">&gt;</button>
  <button class="pagination-btn double-next">&gt;&gt;</button>
</div>

2. 编写CSS样式 #

基础布局样式 #

先设置分页容器的基础样式，确保元素横向排列，并且隐藏溢出的内容：

.pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  width: fit-content; /* 刚好容纳5个页码+所有控制按钮的宽度 */
}

.pages-wrapper {
  display: flex;
  gap: 8px;
}

滑动动画实现 #

给页码容器加上过渡动画，默认位置是0；当添加.slide-to-next类时，让它向左移动“5个页码的宽度”——因为总共有10个页码，刚好分成两组，所以移动总宽度的一半就行：

.pages-wrapper {
  transition: transform 0.3s ease-in-out;
  transform: translateX(0);
}

.pagination.slide-to-next .pages-wrapper {
  /* 总共有10个页码，移动一半宽度就能显示后5个 */
  transform: translateX(calc(-100% / 2));
}

美化按钮和页码 #

给页码和控制按钮加些基础样式，让它们看起来更像可交互的控件：

.page-item, .pagination-btn {
  padding: 4px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  background-color: #fff;
}

.page-item:hover, .pagination-btn:hover {
  background-color: #f5f5f5;
}

3. 状态切换逻辑 #

你的点击事件只需要做一件事：给.pagination容器添加或移除.slide-to-next类。比如：

• 点击>或>>按钮时，添加.slide-to-next类，触发滑动显示6-10
• 点击<或<<按钮时，移除.slide-to-next类，切回显示1-5

如果你的页码数量更多（比如20个），可以用CSS变量来动态计算滑动距离，比如：

.pages-wrapper {
  --page-count: 20;
  --visible-count: 5;
}

.pagination.slide-to-group-2 .pages-wrapper {
  transform: translateX(calc(-100% * var(--visible-count) / var(--page-count)));
}

这样不管有多少页码，都能轻松控制滑动位置。

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