0fr无法触发动画，因其是离散的比率单位而非可插值长度；应改用width+min-width:0+overflow:hidden实现可动画折叠。
为什么直接用 grid-template-columns: 0fr 1fr 不会触发动画
因为 0fr 是一个离散的“无尺寸”状态，CSS 动画无法在 0fr 和 1fr 之间插值——fr 单位本身不参与数值计算，浏览器底层不把它当作可动画的长度类型。你看到的“切换”只是立即重排，没有过渡效果。
-
fr是分配剩余空间的比率单位，不是像素或百分比，不能被transition捕获 - 即使写了
transition: grid-template-columns 0.3s，浏览器也会静默忽略该属性的动画 - 常见错误：试图对
grid-template-areas或隐式轨道做动画，同样无效
用 minmax() + width 组合实现可动画折叠
真正能动画的是 width（或 flex-basis、max-width），所以要把“折叠”逻辑从轨道定义转移到子项自身上。核心思路是：让菜单项容器始终占据一列，但通过控制其 width 和 overflow 来实现视觉收放。
- Grid 容器设为固定两列：
grid-template-columns: minmax(0, 1fr) minmax(0, 3fr)，左侧为菜单栏，右侧为主内容 - 菜单栏容器（如
.nav-sidebar）设置width: 240px（展开态）或width: 0（折叠态），并配overflow: hidden - 给
width加transition: width 0.25s ease-in-out，动画立刻生效 - 注意：必须同时设
min-width: 0和overflow: hidden，否则内容撑开导致宽度无法真正归零
/* 示例关键 CSS */
.nav-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
}
.nav-sidebar {
width: 240px;
min-width: 0;
overflow: hidden;
transition: width 0.25s ease-in-out;
}
.nav-sidebar.collapsed {
width: 0;
}
响应式断点中如何安全切换折叠状态
别在媒体查询里反复覆盖 grid-template-columns，那会破坏动画连续性。应该只在断点中切换类名，并让类名控制 width 和可见性，保持同一套动画逻辑贯穿所有视口。
- 移动端默认折叠：
.nav-sidebar { width: 0; }，再加@media (min-width: 768px) { .nav-sidebar { width: 240px; } } - 避免同时写
display: none—— 它会中断 transition，改用visibility: hidden+width: 0配合opacity: 0（如需淡出） - 如果菜单含绝对定位子元素（如下拉菜单），折叠时要额外处理
pointer-events: none，否则仍可点击
JavaScript 控制折叠时要注意的 DOM 时机
直接操作 classList.toggle('collapsed') 是够用的，但如果你在折叠后立刻读取 offsetWidth 或调用 getBoundingClientRect()，可能拿到旧值——因为样式变更尚未重排。
- 需要获取新尺寸时，用
getComputedStyle(el).width，它返回计算后值，不依赖重排时机 - 若必须等重排完成（比如要基于新宽高做后续布局），用
requestAnimationFrame包一层 - 不要监听
transitionend来判断“已折叠”，因为用户可能快速连点两次，导致事件乱序；改用状态变量 + 类名判断更可靠
实际项目中最容易被忽略的是 min-width: 0 和 overflow: hidden 的组合——少了任一个，width: 0 都会被内部文字或 flex 子项强行撑开，动画就失效了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
