CSS transition 无法直接过渡 auto 值，因 auto 不可计算插值；正确做法是用具体数值单位或 max-height 模拟，避免混用单位、display 切换及 transition: all。
transition 无法直接过渡 auto 值
当把 height、width 或 margin 设为 auto，再试图用 transition 动画它们，浏览器会直接跳变——因为 auto 不是可计算的数值，CSS 过渡引擎无法插值。
常见场景：下拉菜单展开、卡片高度随内容自适应、响应式边距切换。
- ✅ 正确做法：用具体像素值、百分比或
rem等可计算单位；或改用max-height配合足够大的上限值（如max-height: 500px）来模拟高度过渡 - ⚠️ 注意
max-height的陷阱：设太小会截断内容；设太大虽安全但动画时间可能失真（比如从0到500px，实际内容只高60px，视觉上“减速感”明显） - ❌ 不要写
transition: height 0.3s; height: auto;—— 这等于没过渡
padding 和 margin 的过渡必须是同类型单位
混合使用单位（如 margin: 10px 0; → margin: 1rem 0;）会导致过渡失效或行为不可预测，尤其在 Safari 和旧版 Chrome 中。
- ✅ 推荐统一用
px或统一用rem，避免跨单位计算 - ✅ 若需响应式缩放，优先用
em（相对于父元素 font-size）或 CSS 自定义属性 +calc()，例如：div { --pad-base: 0.75; padding: calc(var(--pad-base) * 1rem) calc(var(--pad-base) * 1.5rem); } div:hover { --pad-base: 1.25; } - ⚠️
margin: 0 auto不能被过渡——auto是关键问题，不是居中本身
盒模型变更（border/padding/box-sizing）影响过渡表现
改变 border-width 或 padding 会触发重排（reflow），若同时过渡 width，容易出现“抖动”或尺寸错位，尤其在 flex/grid 容器中。
立即学习“前端免费学习笔记（深入）”；
- ✅ 把
box-sizing: border-box作为默认，确保width始终包含内边距和边框，避免意外溢出 - ✅ 若需过渡边框，优先用
outline（不参与盒模型计算）或box-shadow模拟，更轻量且不触发重排 - ⚠️ 改变
display（如block ↔ inline-block）会中断所有过渡——浏览器会丢弃当前过渡状态，立即切换
transition-property 要精确控制，别偷懒写 all
写 transition: all 0.3s 看似省事，但一旦元素有 opacity、transform、color 等其他变化，就会意外带动盒模型属性一起动，造成卡顿或逻辑混乱。
- ✅ 明确列出需要过渡的属性：
transition: width 0.3s, padding 0.3s, margin 0.3s - ✅ 如果同时动多个盒模型属性，且希望节奏一致，可以合并简写：
transition: box-sizing 0s, width 0.3s, padding 0.3s, margin 0.3s（加box-sizing 0s是为了防止切换时闪动） - ⚠️
transition: *（通配符）无效；transition-property: *也不合法——必须写具体属性名
过渡真正难的不是写法，而是判断哪些变化能被平滑插值、哪些会强制重排。盒模型相关的属性稍有不慎就掉进“看起来写了 transition，但就是不动”的坑里。动手前先问一句：这个值，浏览器能不能算出中间态？
