用 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），动画更顺滑