transition 对 padding 变化无效，因 padding 触发强制 layout 重排，而 transition 仅支持可合成属性（如 transform、opacity）；应改用 transform 模拟视觉效果。
transition 为什么对 padding 变化无效？
直接写 transition: padding 0.3s 看起来合理，但实际动画常卡顿、跳变，甚至完全不触发——根本原因不是写法错，而是浏览器对盒模型属性的重排（reflow）机制：padding 变化会强制触发 layout，而 transition 只能平滑插值「可合成」的属性（如 transform、opacity），padding 不在其中。
- Chrome/Firefox 对
padding的 transition 支持极不稳定，尤其在 flex/grid 容器内，可能直接跳到终值 - 哪怕动画“看起来动了”，也会伴随 layout thrashing，滚动或交互时明显掉帧
-
box-sizing设为border-box或content-box不影响该限制，这是渲染引擎层的硬约束
用 transform 模拟 padding 动画的实操路径
真正可靠的做法是避开 layout 属性，改用 transform: scale() 或 transform: translate() 配合伪元素/子容器制造“视觉上像 padding 在变”的效果。
- 若目标是让内容区“呼吸式”缩放（比如按钮点击时内边距增大），用
transform: scale(1.05)+transform-origin: center，再配合overflow: hidden防溢出 - 若需单边 padding 效果（如左内边距动态增加），给子元素加
position: relative，用left或translateX()移动，父容器保持padding-left: 0 - 必须保留真实
padding语义（如无障碍、文本换行）时，可用伪元素::before占位，transform控制其宽高，主内容区域 padding 固定
示例：
button { padding: 12px 24px; transition: transform 0.2s ease; }<br>button:hover { transform: scale(1.03); }
哪些盒模型属性其实能被 transition 平滑驱动？
不是所有盒模型相关属性都不可动，关键看是否触发 layout。能安全过渡的只有那些仅影响绘制（paint）或合成（composite）层的属性：
立即学习“前端免费学习笔记（深入）”；
-
width/height：⚠️ 不能直接过渡（触发 reflow），但用max-width+overflow: hidden可曲线救国 -
margin：同padding，禁止直接 transition；可用transform: translate()替代 -
border-width：部分浏览器支持，但 iOS Safari 常失效，不推荐 -
outline、box-shadow、opacity：完全安全，且性能好
transition 监听不到 padding 变化？那怎么响应它？
transition 本身不“监听”，它只在 CSS 值变更后自动插值。如果你需要在 padding 改变时执行 JS 逻辑（比如 resize 后调整布局），不能依赖 transitionend，因为该事件可能根本不触发。
- 改用
MutationObserver监听元素style属性变化：new MutationObserver(() => console.log('padding changed')).observe(el, { attributes: true, attributeFilter: ['style'] }); - 若 padding 由 class 切换控制（如
.p-4→.p-8），监听DOMSubtreeModified不可靠，应改用自定义事件或状态管理 - 服务端渲染或框架场景（React/Vue），优先在状态更新时同步触发回调，而非等待样式生效
真实项目里，90% 的“想过渡 padding”需求，本质是想表达状态反馈或空间节奏——用 transform + opacity 组合，比硬刚 padding 更快、更稳、更省心。
