sidebar__trigger--is-collapsed不能写成sidebar--collapsed，因为bem修饰符必须绑定到实际承载交互状态的元素（如汉堡图标）上，而非语义错位的容器；后者会导致样式失效、动画跳变、js切换无响应。
sidebar__trigger--is-collapsed 为什么不能写成 sidebar--collapsed
因为 BEM 的修饰符（Modifier）必须绑定到实际承载该状态的 DOM 元素上，而不是语义模糊的容器。用户点击的是 sidebar__trigger（比如汉堡图标），它的视觉/行为变化才是“已折叠”这个交互状态的直接体现；而 sidebar 是 Block，通常保持 position: fixed 和占位，只是内容区域缩窄或隐藏——它不“坍缩”，只是布局响应。
常见错误现象：
• JS 添加了 sidebar--collapsed 类，DevTools 可见但样式不生效
• 动画卡在半途，或直接跳变，没有过渡
• 响应式切换时子元素（如 sidebar__label）显隐逻辑混乱
实操建议：
• 交互状态只由 sidebar__trigger 承载，对应类名必须是 sidebar__trigger--is-collapsed
• 若需同步改变侧边栏宽度，另加布局级修饰符 sidebar--condensed，由 JS 同步添加到 sidebar 元素上
• 两个类职责分离：--is-collapsed 是用户操作反馈，--condensed 是布局响应，绝不混写在同一元素
flex-basis 动画不生效？先检查这三件事
直接改 flex-basis 没反应，大概率不是代码写错，而是被 Flex 流程外的规则拦住了。
实操建议：
• 确认父容器有 display: flex 且 flex-direction: row（横向布局才让 flex-basis 控制宽度）
• 删除侧边栏自身的 width 声明——它会覆盖 flex-basis，哪怕写了 flex-shrink: 0 也无效
• 检查父容器是否设了 flex-wrap: wrap，一换行，flex-basis 就失效，收缩动画必然卡住
动画跳变的根源常是单位不一致：
• 初始值必须显式声明，如 .sidebar { flex-basis: 240px; }，不能留空或依赖 auto
• 目标值用同单位数值，如 .sidebar--condensed { flex-basis: 60px; }，禁用 auto、fit-content 等不可插值关键词
• 加 box-sizing: border-box，否则 padding/border 会额外撑宽，导致动画终点偏移
max-height: 0 → auto 动画为何失效
max-height: 0 → max-height: auto 不是合法过渡，因为 auto 不是可计算、可插值的数值，浏览器无法生成中间帧，结果就是瞬间显示或干脆无动画。
实操建议：
• 用固定上限替代 auto：展开时设 max-height: 400px（需预估最大子项高度），收起时设 max-height: 0
• 更稳妥的做法是改用 transform: scaleY(0) → transform: scaleY(1)，配合 transform-origin: top
• 必须加 overflow: hidden 在 sidebar__list 上，否则缩放时内容会溢出
• 移动端记得加 will-change: transform，防止闪屏或重绘抖动
IE11 下 flex-basis 动画怎么降级
IE11 完全不支持 flex-basis 的 transition，所有动画都会立即跳变。检测后必须降级，不能硬扛。
实操建议：
• 用 document.documentMode 检测 IE11，成立则走 fallback 路线
• 降级方案一：改用 width + overflow: hidden 配合 transition，兼容性好但需注意 box-sizing 和内边距影响
• 降级方案二：用 transform: scaleX(0) → transform: scaleX(1) 缩放整个侧边栏容器，视觉近似且 IE11 支持该 transition
• 如果项目已明确放弃 IE11，就别写 fallback——现代浏览器（Chrome/Firefox/Safari/Edge）对 flex-basis 动画支持良好，强行兼容只会增加维护负担
最易被忽略的点是：动画属性（如 transition）必须声明在基础类（如 .sidebar）上，而非状态修饰符里。否则 .sidebar--condensed 下没定义 transition，收起时就会跳变——这不是 Bug，是 CSS 层叠逻辑本身的要求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
