Flex容器的display: flex无法动画化，真正可动画的是opacity、transform等支持插值的属性；flex-grow/shrink、order、flex-direction等不可动画，需用transform或max-height等替代方案实现视觉过渡效果。
Flex容器的display: flex本身不能被动画化
直接给display加transition没用——浏览器不支持对display属性做插值动画。常见错误是想“让元素从非flex状态平滑变成flex布局”，结果发现display: none → display: flex只有闪现，没有过渡。
真正能动画的，是那些支持插值的属性：比如opacity、transform、height（需有明确数值）、max-height（用作替代方案）。
- 如果目标是“渐显+伸展”效果，优先用
opacity+transform: scaleY(0)→transform: scaleY(1) - 避免用
height: 0 → height: auto：auto无法参与动画，必须写死具体数值或改用max-height - Flex子项的顺序变化（如
order）也不能动画——它是个整数阶跃值，浏览器不插值
Flex子项位移动画要靠transform，不是left/top
在Flex布局里，用position: relative + left去“移动”一个flex-item，会破坏Flex的流式计算逻辑，还可能触发重排（layout thrashing），性能差。
正确做法是只动transform：它走合成层，不触发重排，且和Flex的主轴/交叉轴定位完全兼容。
立即学习“前端免费学习笔记（深入）”；
- 横向滑入：用
transform: translateX(-100%)→transform: translateX(0) - 纵向堆叠入场：配合
flex-direction: column，用translateY更自然 - 别给
flex-item加transition: all .3s——容易误带动画flex-grow或flex-basis这类不可插值属性
flex-grow和flex-shrink不能直接加transition
这两个属性控制的是“分配剩余空间”的行为，属于布局计算阶段的开关量，不是视觉属性。尝试写transition: flex-grow .3s完全无效，控制台也不会报错，但动画就是不动。
想实现类似“宽度缓慢撑开”的视觉效果，得绕道：
- 用
width或max-width替代flex-grow（适用于已知最大尺寸的场景） - 用
transform: scaleX()模拟拉伸感（注意会缩放内容，需配合transform-origin微调） - 若必须依赖Flex弹性，可结合
@keyframes+animation动态修改flex-basis（它支持动画，但仅限于数值单位，不能是auto）
动画中修改flex-direction或justify-content会强制重排
这些属性一变，整个Flex容器的主轴方向或子项排列逻辑就重算，浏览器必须同步更新所有子项的位置——这就是强制同步布局（forced layout），容易卡顿，尤其在列表项多或动画频率高时。
实际项目中，这类改动更适合做“状态切换”而非“连续动画”：
- 用
opacity+visibility: hidden先隐藏旧布局，再用transition显示新方向的Flex容器 - 如果只是想让子项“反向排列”，改
flex-direction: row-reverse不如直接用transform: scaleX(-1)+ 子项内transform: scaleX(-1)来得轻量 - 移动端慎用
justify-content: space-around动画——某些Android WebView对它的重排优化极差
Flex动画真正的复杂点不在写法，而在判断哪些变化会触发布局、哪些只是绘图层操作。很多时候你以为在“动布局”，其实只需要动transform和opacity就够了。
