transition无法作用于display或height: auto，因其不可动画；应改用max-height、opacity+transform、transform: scaleY等可动画属性，并注意@media中transition声明位置与属性初终值一致性。
transition 无法作用于 display 或 height: auto
断点变化时元素突然消失/出现，或者高度闪跳，根本原因是 display、height: auto、visibility 这类属性不可动画。浏览器不支持对它们做插值计算，transition 直接被忽略。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
max-height替代height: auto：设一个足够大的固定值（如max-height: 500px），再配合overflow: hidden - 避免在媒体查询中切换
display: none→block，改用opacity+transform+pointer-events组合控制显隐和交互 - 若必须收起/展开，优先用
transform: scaleY(0)/scaleY(1)，它可硬件加速且兼容性好
@media 中 transition 触发时机不对
常见现象是：窗口缩放到断点临界值时，动画没播完就卡住，或反复触发导致抖动。这是因为媒体查询本身不产生“过渡”，只是开关样式规则；而浏览器可能在布局重排后才应用新规则，transition 没有稳定起点。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把
transition声明写在「常态」选择器里（比如.nav），而不是只放在@media块内 - 确保断点切换前后，参与动画的属性都有明确初始值和终值（例如
max-height: 0→max-height: 300px） - 避免在
@media中同时改多个影响布局的属性（如width、padding、font-size），分散到不同 class 控制更可控
flex/grid 容器内子项重排无过渡效果
Flex 或 Grid 布局下，断点一变，子元素位置突变，transition 完全无效——因为 order、flex-direction、grid-template-columns 这些属性本身不支持过渡。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
transform: translateX()或translateY()模拟位置移动，这些属性可动画且不影响文档流 - 对需要重排的子项单独加 class，用 JS 监听
resize并在断点切换后延时 1ms 触发getComputedStyle强制重排，再加动画 class - 复杂布局推荐用
container queries（现代浏览器）替代部分@media，它能绑定到组件自身尺寸，动画更可预测
JS 驱动的断点响应比纯 CSS 更难平滑
用 window.matchMedia 或 resize 事件手动切 class，容易因执行时机不准导致动画中断，尤其在快速拖拽窗口时。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
requestAnimationFrame包裹状态更新，避免 layout thrashing - 给动画加防抖：断点触发后等待 50ms 再执行 DOM 更新，过滤掉中间态
- 优先用
CSS.registerProperty（如果支持）定义自定义属性，让动画逻辑留在 CSS 层，JS 只负责设值
真正难的不是写几行 transition，而是判断哪些属性能动、哪些必须绕开、以及浏览器什么时候会悄悄跳过你写的那条规则。
