bootstrap分页项transition失效是因为.disabled状态禁用pointer-events且未统一声明过渡属性；需在.page-link:not(:disabled)及:hover/:focus中同时设置background-color、color等初始值和transition。
Bootstrap分页项的transition为什么加了没反应
因为 Bootstrap（尤其是 v5+）默认给 .page-link 设置了 pointer-events: none 在禁用状态，且分页项的 hover/focus 样式依赖伪类和状态切换，直接在 .page-item 或 .page-link 上加 transition 很可能被覆盖或不触发重绘。
- 只加
transition: all 0.2s不够——必须明确指定要过渡的属性，比如color、background-color、transform - Bootstrap 的
.page-link是<a></a>标签，默认无背景色，hover 时才设background-color，所以得同时给默认态和 hover 态定义背景（否则过渡从 transparent → color 会失效） - 如果用了
!important覆盖 Bootstrap CSS，后续升级容易出问题；优先用更具体的选择器代替
怎么给.page-link正确添加transition
核心是「在生效的状态规则里统一声明 transition」，而不是只写在默认样式里。推荐直接作用于 .page-link 的 :not(:disabled) 状态，并补全背景与文字颜色的初始值。
- 给
.page-link:not(:disabled)设置background-color: #fff（或继承自 theme 的基础色），再加transition: background-color 0.2s, color 0.2s - 确保
:hover和:focus规则里也设置了同名属性（如background-color: #0d6efd），否则过渡不会发生 - 避免对
.page-item加 transition——它只是容器，真正变化的是.page-link的子元素样式
.page-link:not(:disabled) {
background-color: #fff;
color: #0d6efd;
transition: background-color 0.2s, color 0.2s;
}
.page-link:not(:disabled):hover,
.page-link:not(:disabled):focus {
background-color: #0d6efd;
color: #fff;
}
使用transform做缩放/位移过渡时要注意什么
想让点击或悬停时有轻微缩放效果很常见，但 transform 会触发硬件加速，在某些旧版 Chrome 或移动端 WebView 中可能导致分页项错位或闪烁。
- 只对
.page-link加transform: scale(1)初始值，hover 时改为scale(1.05)，并配transition: transform 0.15s - 必须加
will-change: transform吗？不用。现代浏览器已足够智能，盲目加反而可能引发渲染层开销 - 注意
transform会让元素脱离文档流——如果分页项高度本身靠 padding 维持，缩放后可能挤压上下间距，建议配合overflow: hidden或微调padding
兼容 Bootstrap 4 和 5 的写法差异
Bootstrap 4 的分页类名是 .page-item + .page-link，和 v5 一致，但 v5 默认启用了 CSS 变量，且部分 focus 样式依赖 box-shadow 而非 border，过渡时若没包含 box-shadow 就会断层。
- v4 可以只过渡
background-color和color；v5 建议额外加上box-shadow，例如：transition: background-color 0.2s, color 0.2s, box-shadow 0.2s - v5 中
.page-link:focus默认有box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25)，如果不过渡box-shadow，焦点出现时就是突变 - 不要用
!important强行覆盖box-shadow的过渡，而是用更高优先级选择器，比如.pagination .page-link:focus
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
