为什么CSS transition在响应式断点切换时不能平滑过渡？

响应式过渡需用class控制可动画属性而非@media；推荐transform、max-height、opacity+visibility组合；transition须声明在基础类中；避免重排与强制同步布局。

transition写在@media里根本不会触发

媒体查询只是启用或禁用整套样式规则，不是“修改属性值”，浏览器不认为这是可过渡的变更。比如：@media (max-width: 768px) { .nav { width: 100%; transition: width 0.3s; } }——这段代码对断点切换毫无作用，因为从桌面规则切换到移动规则时，transition声明本身是新加载的，旧状态已丢失，没有起止值可计算。

响应式过渡必须靠class + 可动画属性驱动

真正能动的只有那些支持过渡、且值可被浏览器线性插值的属性。你得把尺寸/位置/显隐逻辑从@media中抽出来，改由class控制：

• transform（推荐）：用translateX(0) ↔ translateX(-100%)替代width或left，避免重排，还能触发硬件加速
• max-height：折叠菜单时，设max-height: 0 → max-height: 500px，不能用none
• opacity + visibility：淡入淡出必须配对使用，visibility本身不可过渡，但能控制是否响应事件

transition必须声明在基础选择器上

如果只在:hover或某个功能类里写transition，鼠标移开或class移除时就没了。正确做法是把它钉死在默认类里：

.sidebar {  transform: translateX(0);  transition: transform 0.3s ease, opacity 0.3s ease;}.sidebar.is-collapsed {  transform: translateX(-100%);  opacity: 0;}

这样无论加还是删is-collapsed，过渡都生效。JS监听resize后操作class即可，CSS不负责检测视口变化。

立即学习“前端免费学习笔记（深入）”；

移动端卡顿常因图层未提升或重排干扰

iOS Safari尤其敏感，transform动画首帧跳变或掉帧，大概率是没走GPU合成路径：

• 给动画元素加transform: translateZ(0)或will-change: transform（注意：后者要用JS动态加/删，别写死在CSS里）
• 确保没同时改width、height、top等触发布局重排的属性
• 父容器若设了overflow: hidden或clip-path，可能截断图层提升，得检查渲染层

最易被忽略的是：transition本身不卡，但和transform混用时，只要读一次offsetWidth或getBoundingClientRect()，整个动画流水线就中断了。