CSS中width/height的transition对auto值无效，因auto无法插值；应改用具体数值、max-height模拟或transform/opacity组合实现平滑过渡。
CSS 中直接对 width 或 height 设置 transition 有时看起来“不生效”，其实不是过渡失效，而是因为元素初始或目标状态的宽高为 auto —— 而 auto 无法参与数值插值，浏览器无法计算中间帧，导致过渡被跳过。
确保 width/height 是可计算的具体数值
过渡只在两个确定的长度值之间生效（如 100px → 200px、0 → 2rem）。若其中一端是 auto（常见于内容自适应容器），过渡就会静默失败。
- ❌ 错误示例：
height: auto;→height: 300px;（auto无法插值） - ✅ 正确做法：用具体数值替代
auto，例如先用 JS 获取真实高度，再设置为内联 style 过渡；或改用max-height模拟（见下文）
用 max-height 替代 height 实现“展开/收起”过渡
当需要对未知高度的内容做展开动画时，max-height 是最常用且可靠的替代方案。只要设一个足够大的上限值（大于内容实际高度），配合 overflow: hidden，就能实现平滑过渡。
- 初始状态：
max-height: 0; overflow: hidden; - 展开状态：
max-height: 500px;（需确保该值 ≥ 内容最大可能高度） - 添加过渡：
transition: max-height 0.3s ease-in-out; - ⚠️ 注意：如果内容高度动态变化较大，可设为
max-height: 100vh或用 JS 动态写入精确高度
用 transform + opacity 替代尺寸过渡（更高效）
如果目标是视觉上的“缩放”或“显现”，优先考虑 transform: scale() 和 opacity。它们触发硬件加速，性能更好，且无需关心具体尺寸值。
立即学习“前端免费学习笔记（深入）”；
- 隐藏时：
transform: scale(0); opacity: 0; - 显示时：
transform: scale(1); opacity: 1; - 过渡写法：
transition: transform 0.2s ease, opacity 0.2s ease; - 适用场景：弹窗、下拉菜单、卡片悬停放大等，不依赖容器尺寸变化
检查 transition 属性是否被覆盖或未生效
即使写了 transition: width 0.3s;，也可能因 CSS 优先级、简写覆盖或触发时机问题而失效。
- 避免简写冲突：不要在同一个规则里混用
transition: all 0.3s;和单独的width过渡，容易被覆盖 - 确认触发条件：过渡需靠属性值改变触发（如 class 切换、伪类 hover），单纯 JS 修改 style 后立即读取 offsetHeight 可能导致浏览器跳过重排，建议加
requestAnimationFrame或微任务延迟 - 检查 display：从
display: none切到block不会触发动画，因为元素在none时无盒模型。应改用visibility: hidden+height/opacity组合
