直接用width动画会卡顿或失效，因浏览器需触发layout重排，且width受flex-basis、min-width:auto及overflow影响；css变量须绑定flex-basis/max-width等可过渡带单位属性，并配overflow:hidden和min-width:0才能生效。
为什么直接用 width 动画会卡顿或失效
浏览器对 width 的过渡动画必须触发 layout（重排），尤其当侧边栏内有换行文本、flex-basis 依赖内容撑开、或父容器未明确设 display: flex 时，动画常跳变甚至不执行。部分浏览器（如 Safari 17.5+）在媒体查询切换后，还可能缓存 calc(var(--sidebar-span) - 80px) 这类表达式结果，导致宽度不再响应变量更新。
--sidebar-width 必须绑定可过渡且带单位的属性
CSS 变量本身不可动画，只有它参与的**支持过渡的属性**才能动起来。所以不能只定义变量，还得把它用在 flex-basis、max-width 或 transform 上——且这些属性值必须带单位（px、rem 等），不能是纯数字或无单位计算。
- ✅ 推荐：
flex-basis: var(--sidebar-width); transition: flex-basis 0.25s ease; - ✅ 更稳：
max-width: var(--sidebar-width); overflow: hidden; transition: max-width 0.3s ease; - ❌ 避免：
width: calc(var(--sidebar-width) - 40px);—— 浏览器切换媒体查询时可能不重算 - ❌ 避免：
left: var(--sidebar-width);——left不是合成属性，易重排
折叠态要真正“隐藏”，不是只缩窄
仅把 --sidebar-width 设为 0px 不够：内容仍占文档流、文字可能溢出、点击区域还在。必须配合布局控制和视觉裁剪。
- 加
overflow: hidden，否则内部文字撑宽容器，动画失效 - 用
min-width: 0防止 flex 项被内容最小宽度锁定（尤其含长单词或链接时） - 折叠时建议同步设
opacity: 0.01+pointer-events: none，彻底屏蔽交互与渲染干扰 - 不要用
display: none—— 它不可过渡，切回来就是硬切
JS 修改变量后，动画为何没触发
:root 变量更新本身不触发重绘，必须让浏览器感知到“样式变更”。单纯 document.documentElement.style.setProperty('--sidebar-width', '60px') 不足以启动过渡——除非该变量已被用在某个带 transition 的属性上，且该属性值确实发生了变化。
- 确保变量已实际参与 CSS 计算，例如：
.sidebar { flex-basis: var(--sidebar-width); } - 避免在 JS 中连续多次 setProperty，中间无 layout 触发点；可加
offsetWidth强制重排再改第二值 - 更可靠的做法：用 class 切换（如
.sidebar.is-collapsed）驱动变量变化，而非直接操作:root - 调试时检查 computed style，确认
flex-basis值是否真的随变量更新而变
真实项目里最易被忽略的点是：变量更新后，你得确认它最终落地的那个 CSS 属性（比如 flex-basis）是否真的变了，以及这个属性是否在当前上下文里被浏览器当作可过渡目标——很多“动画不动”问题，其实卡在这一层隐式依赖上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
