用 transition 实现 hover 宽高平滑变化，需设明确初始和 hover 数值（如 width: 200px→280px），禁用 auto/fit-content；推荐单独声明 transition: width 0.3s ease, height 0.3s ease；避免 all；配合 overflow: hidden 和 min-width/min-height 防卡顿；更优方案是用 transform: scale() 替代，性能更好。
用 transition 实现 hover 时宽高平滑变化，关键在于正确设置过渡属性和初始状态，避免突兀跳变。
确保 width 和 height 可被过渡
CSS 中只有可计算的、有明确数值的 width 和 height 才能过渡。不能对 auto、fit-content 或无显式定义的尺寸做过渡。
- 给元素设置明确的初始值，例如
width: 200px; height: 40px; - hover 状态也必须是具体数值，如
width: 280px; height: 60px; - 避免写成
width: auto;或height: 100%;（除非父容器高度固定且可继承）
正确书写 transition 属性
推荐单独声明要过渡的属性，而不是用 all，防止意外触发其他样式变化：
transition: width 0.3s ease, height 0.3s ease;- 也可合并写为：
transition: width 0.3s ease, height 0.3s ease; - 不建议：
transition: all 0.3s ease;（可能让 color、opacity 等也参与过渡，干扰预期效果）
处理内联内容导致的“看不见的初始尺寸”问题
如果元素内是文字或图片，且未设宽高，浏览器渲染时可能先按内容撑开再过渡，造成视觉卡顿。
立即学习“前端免费学习笔记（深入）”；
- 给容器加
overflow: hidden;防止内容溢出影响布局感知 - 用
min-width/min-height设下限，配合transition更稳定 - 若需响应式缩放，考虑改用
transform: scale()替代宽高变化（性能更好、支持 auto 尺寸）
补充：用 transform 实现更流畅的缩放（推荐替代方案）
如果目标是“看起来变大”，transform: scale() 更高效，且无需预设尺寸：
- 初始：
transform: scale(1); - hover：
transform: scale(1.2); - 过渡：
transition: transform 0.3s ease; - 优势：不触发重排（reflow），只重绘（repaint），动画更顺滑
