CSS中不存在transition-width和transition-height属性，正确写法是使用transition: width 0.3s ease, height 0.3s ease;，且需避免auto值、display切换及布局模式干扰。
CSS 没有 transition-width 和 transition-height 这两个属性，它们根本不存在 —— 尝试写上也不会生效。
为什么 transition-width / transition-height 不起作用
这是初学者常踩的坑：把 CSS 属性名和 transition 的语法混淆了。transition 只能作用于「可动画的 CSS 属性」，且必须写成 transition: width 0.3s ease; 这种形式，而不是单独声明 transition-width。
- CSS 标准中从未定义过
transition-width或transition-height这类属性 - 浏览器会直接忽略它们，DevTools 中也看不到对应声明
- 真正控制宽高过渡的是
transition简写属性或transition-property
正确写法：用 transition 控制 width / height 动画
要让元素宽高平滑变化，需显式指定 width 和/或 height 为可过渡属性，并确保触发重排（如通过 class 切换、伪类或 JS 修改）。
- 必须设置初始值和目标值（不能从
auto过渡到具体数值，反之亦然） - 推荐写法：
transition: width 0.3s ease, height 0.3s ease; - 如果只希望某一个方向过渡，就只写对应属性，比如仅宽变化：
transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1); - 避免在 flex / grid 容器中依赖 width/height 过渡 —— 布局模式可能绕过这些样式
示例：
立即学习“前端免费学习笔记（深入）”；
.box {
width: 100px;
height: 100px;
background: #3498db;
transition: width 0.3s ease, height 0.3s ease;
}
.box.expanded {
width: 200px;
height: 150px;
}
更可靠替代方案：使用 transform 缩放
当只需要视觉上的“变大变小”，transform: scale() 比修改 width/height 更高效，且支持从任意尺寸过渡（包括 auto），也不触发重排。
-
transform是硬件加速属性，动画更流畅 - 不会影响文档流，避免其他元素跳动
- 注意：缩放会影响子元素字体、边框等 —— 如需保持内容大小不变，得反向缩放子元素
- 示例：
transition: transform 0.3s ease; .box:hover { transform: scale(1.5); }
常见失效原因与排查点
即使语法写对，宽高过渡仍可能“不动”—— 多数是因为以下几点：
- 目标值是
auto：CSS 无法计算auto的像素值，过渡中断。改用具体数值或 JS 测量后设值 - 父容器限制（如
overflow: hidden或固定尺寸）导致视觉无变化 - 未触发重绘：比如只改了 JS 中的
style.width但没触发 layout，可加offsetHeight强制重排 - display 从
none切换过来：display 变化本身不触发 transition，需先设display: block再延时改尺寸
复杂交互中，宽高过渡容易受盒模型、flex/gird 行为、继承样式干扰，不如 transform 或 max-height（用于展开收起）来得稳定。
