transition在@media中失效是因为声明位置错误，必须写在常态选择器中；max-height过渡闪跳因auto不可插值，应改用固定值或transform；渐变需明确transition background-image；移动端需兼容iOS bug并检查权重。
transition为什么在@media里突然失效
根本不是媒体查询没生效，而是transition声明位置错了。浏览器只在属性变化时查当前元素的transition声明，如果它只写在@media块里，那非断点状态下压根没这个声明——起点都不存在，自然没法插值。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把
transition写在常态选择器里（比如.nav），而不是只塞进@media (max-width: 768px)中 - 用开发者工具「Computed」面板确认：无论窗口大小如何，
transition属性始终亮着 - 避免在媒体查询中覆盖整个
transition简写，改用transition-property等子属性局部调整
max-height过渡在断点切换时闪跳怎么办
闪跳主因是max-height: 0→max-height: auto不合法——auto不可插值，浏览器算不出中间帧，直接跳到终态。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用固定值替代
auto：max-height: 500px（设得比内容最大高度略大即可） - 配合
overflow: hidden，否则超出部分会溢出 - 起始值必须显式声明：
max-height: 0不能省，也不能靠initial或unset - 若内容高度波动大，优先改用
transform: scaleY(0)→scaleY(1)，它可硬件加速且无高度计算依赖
背景渐变响应式切换时颜色突变
渐变本身不能被transition平滑插值，除非你明确告诉浏览器“动的是background-image”，而不是background简写。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须写
transition: background-image 0.3s ease，写background或background-color无效 - 渐变方向统一用角度值（如
135deg→90deg），避免混用to bottom和180deg - 色标数量、顺序保持一致，否则浏览器无法对齐插值节点
- 降级方案：加一层
background-color作为fallback，防止旧浏览器白屏
移动端想关掉过渡但CSS不生效
常见于Safari iOS，transition: none在iOS 15.4之前有解析bug，会被忽略；更普遍的问题是选择器权重不够，被更高优先级规则覆盖。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用「Computed」面板确认最终生效的
transition规则来源和权重 - 显式重置全部子属性：
transition-property: none; transition-duration: 0s; transition-timing-function: step-start; - 加
-webkit-transition: none兼容旧版Safari - 兜底做法：JS切换预设类
.no-transition，而非直接操作style.transition
