Flex子元素width/height过渡失效，因初始计算值为auto无法插值；需同时设min-width/min-height与width/height，或改用transform替代。
Flex布局下直接对width、height、flex-grow等属性加transition，大概率没动画——不是你写错了，而是这些值在Flex计算中被覆盖或不可插值。
为什么width/height过渡失效
Flex子元素的width和height初始计算值常为auto，哪怕你写了width: 100px，也可能被flex: 1或flex-grow覆盖。浏览器无法从auto插值到具体像素值，直接跳变。
- 用DevTools的Computed面板检查目标元素的
width，如果显示auto而非数值，说明起始值不可用 - 必须同时声明
min-width（或min-height）和width（或height），例如：min-width: 100px; width: 100px; -
min-width不能设为0（部分浏览器解析异常），建议用0.01px或1px - 若只需视觉缩放且不关心文档流占位，改用
transform: scaleX()更可靠，不触发重排
为什么flex-grow过渡不起作用
flex-grow本身不是可动画属性，CSS规范未将其标记为可插值，浏览器压根不支持对其做过渡计算。
- 常见错误：写
transition: flex-grow 0.3s，但Computed里transition-property显示none - 可替代方案是
flex-basis：它支持过渡，但必须设具体值（如200px或50%），不能是auto - 写法示例：
transition: flex-basis 0.25s ease-in-out;，JS中用element.style.flexBasis = '300px'前，确保已有内联初始值 - IE11不支持
flex-basis过渡，需降级为width+overflow: hidden
为什么justify-content/align-items动不了
Flex容器一旦加了transform（哪怕只是transform: translateZ(0)），就会触发BFC，导致justify-content和align-items失效——这不是bug，是规范行为。
立即学习“前端免费学习笔记（深入）”；
- 不要把
transform写在Flex容器上，改挂到子元素，并配合flex: 0 0 auto禁用弹性拉伸 - 父容器高度未明确（如仅靠内容撑开）也会让
align-items: center无效，需设height或min-height - 若必须提升合成层，用
will-change: transform代替无意义transform，动画结束后记得移除 - 行内元素在Flex中默认不响应
align-items，需加position: relative才能生效
如何确认transition是否真正生效
别只信Styles面板里写的那行transition，得去Computed里看它是否“落地”。很多失效问题其实源于样式被覆盖或上下文丢失。
- 打开DevTools → Elements → 选中元素 → Computed标签页，搜索
transition-property，确认不是none；再查transition-duration是否非0s - 如果某条规则只写在
:hover里（如.box:hover { transition: opacity 0.2s; }），离开时过渡就断了——transition必须写在基础状态中 - 检查是否有全局重置（如
* { transition: none !important; }）或transform等创建新层叠上下文的属性干扰子元素 - 用
opacity或transform测试：它们天然支持GPU加速，若这两个能动，说明环境没问题，问题出在目标属性本身
最容易被忽略的是：Flex布局下，你写的尺寸声明可能根本没进Computed，而是在Flex引擎里被重算掉了——过渡需要确定的起点，而Flex的“确定”只来自flex-basis、min-width这类不参与弹性分配的属性。
