媒体查询中transition无效，因样式规则启停不触发属性变更；需用class控制可过渡属性（如transform、max-height、opacity），配合JS监听resize切换class。
transition在媒体查询里根本不会触发
直接写 @media (max-width: 768px) { .box { width: 100%; transition: width 0.3s; } } 是无效的。CSS transition 只对**同一元素在相同选择器下、因属性值变化引发的重绘**生效，而媒体查询切换时，样式规则本身被启用或禁用，不构成“属性变更”，浏览器不会启动过渡动画。
必须让响应式变化落在可过渡的属性上
核心思路：把原本由媒体查询直接控制的尺寸/位置/显示状态，改为用 class 控制，并确保这些 class 切换时修改的是 transition 支持的属性（如 width、opacity、transform、max-height 等）。
常见可行组合：
- 用
transform: scale()或transform: translateX()替代width/left—— 性能更好，支持硬件加速 - 用
max-height+overflow: hidden实现折叠/展开过渡（注意不能设max-height: 0→max-height: none，得用具体像素值） - 用
opacity+visibility配合transition实现淡入淡出（visibility本身不可过渡，但和opacity联用可控制显隐节奏）
JavaScript辅助判断断点并添加class
纯 CSS 无法监听视口变化并触发 class 切换，必须靠 JS 检测 resize 事件，再根据当前宽度手动加/删 class。
立即学习“前端免费学习笔记（深入）”；
示例逻辑：
function updateResponsiveClass() {
const el = document.querySelector('.responsive-box');
if (window.innerWidth <= 768) {
el.classList.add('is-mobile');
} else {
el.classList.remove('is-mobile');
}
}
window.addEventListener('resize', updateResponsiveClass);
updateResponsiveClass(); // 初始化
对应 CSS：
.responsive-box {
transition: transform 0.3s ease, opacity 0.2s ease;
}
.responsive-box.is-mobile {
transform: scale(0.95);
opacity: 0.9;
}
避免常见性能陷阱
响应式过渡容易误踩的坑：
- 别在
resize回调里直接操作 DOM 样式 —— 必须节流（throttle）或用requestAnimationFrame，否则高频触发导致卡顿 - 慎用
height或width过渡 —— 会触发 layout，优先选transform和opacity - 移动端要注意
touch-action: manipulation可能干扰transform动画的触控响应 - 如果用
max-height做菜单展开，初始值建议设为max-height: 0.01px而非0，避免 Safari 下过渡失效
真正平滑的响应式动画，本质是把“媒体查询开关”转化成“class 触发的属性渐变”，中间那层 JS 胶水逻辑和属性选型，比写几行 transition 关键得多。
