CSS transition 无法在媒体查询切换时触发动画，因其只响应同一选择器下属性值变更，而非规则启用/禁用；应改用 class 控制 transform、opacity、max-height 等可插值属性，并配合节流的 JS 监听实现平滑过渡。
直接说结论：CSS transition 无法在媒体查询（@media）规则切换时自动触发动画——它只响应同一选择器下属性值的变更，不响应规则启用/禁用本身。
为什么@media里写transition没用
比如这样写：
@media (max-width: 768px) {
.sidebar { width: 80%; transition: width 0.3s; }
}
@media (min-width: 769px) {
.sidebar { width: 240px; transition: width 0.3s; }
}
实际效果是：窗口缩放到 768px 临界点时，.sidebar 宽度瞬间跳变，毫无过渡。原因很明确：
-
transition不监听“哪条 CSS 规则生效”，只监听“同一个元素上某个属性从 A 值变成 B 值” - 媒体查询切换时，浏览器只是启用了新规则、停用了旧规则，并未对
width做“赋值变更”操作 - 如果原始
width是auto或由内容撑开，那它根本不是可插值的数值，transition更无从谈起
真正能动的方案：用 class 控制可过渡属性
把响应式逻辑从媒体查询“下放”到 class 切换，再让 JS 监听视口变化来增删 class。关键在于：只对 transform、opacity、max-height、max-width 这类支持平滑插值的属性做动画。
立即学习“前端免费学习笔记（深入）”；
- 用
transform: translateX()替代left或margin-left—— 避免触发 layout，GPU 加速友好 - 用
max-width替代width实现侧边栏收起/展开，初始值别设0，改用0.01px防 Safari 失效 - 配合
overflow: hidden和pointer-events: none消除残留交互热区 - 移动端慎用
transform: scale()+touch-action: manipulation组合，可能干扰手势识别
JS 监听 resize 的实操要点
别直接在 resize 回调里反复操作 DOM 样式或 class，高频触发会导致卡顿。必须节流：
- 用
requestAnimationFrame包一层是最轻量的做法，适合简单断点判断 - 若需精确匹配多个断点（如 480px / 768px / 1024px），建议用
ResizeObserver监听容器而非 window —— 更精准、更少误触发 - 初始化时务必手动调用一次更新函数，否则首屏加载时 class 可能缺失
- 不要依赖
transitionend事件做后续逻辑 —— 它在媒体查询覆盖、JS 强制重排、父容器 flex/gird 重计算等场景下极易丢失
容易被忽略的兼容性细节
看似简单的平滑切换，在真实项目中常因几个小点崩掉：
-
max-height: 0 → max-height: 300px能动，但max-height: 0 → max-height: none绝对不动 ——none不是数值，无法插值 - 用
opacity+visibility控制显隐时，visibility本身不可过渡，但它能解决opacity: 0后仍可点击的问题 - Flex 容器内子项用
transform动画时，某些旧版 Safari 会丢帧，加will-change: transform可缓解（但别滥用） - 如果用
grid-template-columns做响应式列数切换，它本身不支持transition，必须转成transform或opacity动画替代
