使用Grid布局与transform动画结合实现响应式侧边栏折叠，通过grid-template-columns控制区域宽度，配合transform和opacity处理内部元素动效，利用媒体查询或JavaScript管理折叠状态，兼顾流畅动画与布局灵活性，适用于现代浏览器的移动端与桌面端适配。
响应式侧边栏折叠可以通过 CSS 的 Grid 布局 与 transform 动画结合实现，既能保证布局灵活，又能提供流畅的视觉反馈。这种方案无需改变 DOM 结构，适合现代浏览器环境下的移动端适配和桌面端切换。
1. 使用 Grid 布局定义主结构
通过 grid-template-columns 控制侧边栏和主内容区域的宽度分配，是实现响应式折叠的核心。默认状态下展示完整侧边栏，在小屏幕或折叠状态下将其隐藏或压缩。
示例结构：
.container {
display: grid;
grid-template-columns: 240px 1fr; /* 默认侧边栏宽240px */
min-height: 100vh;
transition: grid-template-columns 0.3s ease;
}
<p>.sidebar.collapsed {
grid-template-columns: 60px 1fr; /<em> 折叠为图标栏 </em>/
}
利用 transition 对 grid-template-columns 过渡支持（部分浏览器需注意兼容性），可让列宽变化更平滑。
2. transform 实现内部元素动画
直接缩放或隐藏侧边栏文字内容可能造成布局抖动。使用 transform: translateX() 或配合 opacity 可实现子元素的淡出滑动效果。
例如：当侧边栏进入 collapsed 状态时，隐藏文字并居中图标：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
.sidebar.collapsed .nav-text {
transform: translateX(-100%);
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
pointer-events: none;
}
<p>.sidebar .nav-icon {
margin: 0 auto;
}
这样在折叠过程中，文字向左滑出并消失，图标自动居中，视觉体验更自然。
3. 响应式断点控制折叠状态
借助媒体查询或 JavaScript 检测视口宽度，自动触发 collapse 状态。
- 小于 768px 时，默认折叠侧边栏
- 点击按钮可手动切换展开/收起
- 使用类名切换而非 display:none，确保动画可执行
JavaScript 示例：
const toggleBtn = document.getElementById('toggle-sidebar');
const container = document.querySelector('.container');
<p>toggleBtn.addEventListener('click', () => {
container.classList.toggle('collapsed');
});
4. 兼容性与性能优化建议
尽管现代浏览器对 Grid 和 transform 支持良好，但仍需注意：
- 避免频繁重排，优先使用 transform 和 opacity 触发动画
- 在低版本浏览器中降级为固定定位侧边栏
- 测试 iOS Safari 对 grid layout transition 的支持情况
- 添加 will-change: transform 提升动画性能
基本上就这些。用 Grid 控制布局结构，用 transform 处理细节动画，两者结合能做出既响应式又丝滑的侧边栏折叠效果。不复杂但容易忽略的是过渡的一致性和状态管理。保持类名清晰、样式分离，维护起来也更轻松。
