许多前端开发者都曾遇到这样的困境：在响应式布局的断点切换过程中，CSS过渡动画突然停止工作。这实际上是一个非常典型的技术误区，核心原因往往与 transition 属性的声明位置以及触发机制密切相关。
将 transition 写在 @media 内部无法触发动画效果
媒体查询本质上是一个条件开关——它只在满足特定视口范围时启用或停用某套样式规则，而非动态“修改属性值”。对浏览器而言，这并不构成一次属性变化，因此自然不会触发过渡动画。举个例子：
@media (max-width: 768px) { .na v { width: 100%; transition: width 0.3s; } }
当视口从桌面宽度切换到 768px 以下时，这段代码根本不会生效。因为在切换的瞬间，transition 规则本身是作为一个全新的样式声明被加载进来的，旧状态已经丢失，不存在可计算的起始值与结束值，动画自然无从谈起。
响应式过渡必须依靠 class 与可动画属性来驱动
真正能够实现平滑动画效果的，只有那些支持过渡且值可以被浏览器线性插值的属性。正确的做法是将尺寸、位置、显隐等逻辑从 @media 中抽离出来，交由 class 来控制：
transform（推荐）：用translateX(0)↔translateX(-100%)替代width或left，既能避免布局重排，又能触发硬件加速。max-height：实现折叠菜单时，设置max-height: 0→max-height: 500px。注意不能使用none，因为none无法被插值计算。opacity+visibility：淡入淡出效果必须配对使用。visibility本身不可过渡，但它可以控制元素是否响应交互事件，两者组合就能实现“不可见且不可点击”的效果。
transition 必须声明在基础选择器上才能双向生效
很多开发者习惯只在 :hover 或某个功能类里书写 transition，结果鼠标移开或 class 移除后，过渡效果瞬间消失。正确的做法是将 transition 固定在默认类中：
.sidebar {
transform: translateX(0);
transition: transform 0.3s ease, opacity 0.3s ease;
}
.sidebar.is-collapsed {
transform: translateX(-100%);
opacity: 0;
}
这样一来，无论添加还是移除 is-collapsed，过渡都能双向触发。而断点切换的问题，交给 JavaScript 监听 resize 事件后操作 class 即可，CSS 不需要直接检测视口变化。
移动端卡顿通常源于图层未提升或布局重排干扰
iOS Safari 对这类问题尤其敏感。如果 transform 动画的首帧出现跳变或掉帧，很可能是因为没有走 GPU 合成路径：
- 为动画元素添加
transform: translateZ(0)或will-change: transform——注意will-change应该用 JavaScript 动态加载和移除，不要写死在 CSS 里。 - 确保没有同时修改
width、height、top等会触发布局重排的属性。 - 父容器如果设置了
overflow: hidden或clip-path，可能会意外截断图层提升，需要检查渲染层是否完整。
最容易被忽视的一点是：transition 本身并不会导致卡顿，但一旦与 transform 混用，只要中途读取一次 offsetWidth 或 getBoundingClientRect()，整个动画流水线就会立即中断。这是一个非常隐蔽的陷阱。
