本文介绍一种结合 javascript 动态测量与 css 过渡的方案，解决纯 css 下 collapsible 侧边栏无法自适应内容宽度、文字重排和渲染性能等问题，实现自然、流畅、无硬编码宽度的展开/收起动画。
本文介绍一种结合 javascript 动态测量与 css 过渡的方案，解决纯 css 下 collapsible 侧边栏无法自适应内容宽度、文字重排和渲染性能等问题，实现自然、流畅、无硬编码宽度的展开/收起动画。
在构建现代 Web 应用时，一个常见需求是实现可折叠的侧边栏（Sidebar）——既节省空间，又保留导航功能。虽然通过 display: none 或 width: 0 配合 transition 可快速实现基础切换，但如问题所述，这类方案存在三大痛点：需预设固定宽度、内容文字随缩放重排、DOM 仍参与布局计算影响性能。
更优解在于：让 CSS 负责动画表现，JavaScript 负责动态“锚定”初始尺寸。核心思路是——在折叠前，用 getBoundingClientRect() 精确读取菜单内容的自然宽度，并将其作为过渡起点；收起时设为 0；展开时再恢复该宽度。这样既保留了内容驱动的自适应性，又规避了 max-width 带来的延迟感。
以下是完整实现方案：
✅ HTML 结构（语义清晰、层级合理）
<div class="container">
<div class="menu">
<div class="toggle">✕</div>
<div class="menu-content">
<div class="content">首页<br>项目<br>设置<br>帮助</div>
</div>
</div>
<div class="main-content">主内容区域 —— 可自由滚动、响应式布局</div>
</div>✅ CSS 样式（专注动画与布局控制）
.container {
display: flex;
position: fixed;
top: 0; left: 0;
width: 100vw; height: 100vh;
overflow: hidden;
}
.menu {
background: #ffeb3b;
flex: none;
height: 100%;
display: flex;
flex-direction: column;
}
.toggle {
padding: 12px 16px;
cursor: pointer;
user-select: none;
font-weight: bold;
background: #ffc107;
text-align: center;
}
.menu-content {
flex: 1;
overflow: hidden;
transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* 缓动增强自然感 */
width: fit-content; /* 初始按内容宽渲染 */
}
.menu-content .content {
padding: 16px;
white-space: nowrap; /* ✅ 关键！防止文字折行重排 */
overflow: hidden;
transition: opacity 0.4s ease;
}
.container.collapsed .menu-content {
width: 0 !important; /* 强制覆盖 JS 设置的 width，确保收起 */
}
.container.collapsed .menu-content .content {
opacity: 0;
}✅ JavaScript 行为逻辑（精准测量 + 宽度托管）
function initCollapsibleMenu() {
const toggleBtns = document.querySelectorAll('.menu .toggle');
const containers = document.querySelectorAll('.container');
// 初始化：为每个未折叠菜单记录其自然宽度
function updateMenuWidth() {
containers.forEach(container => {
if (container.classList.contains('collapsed')) return;
const menuContent = container.querySelector('.menu-content');
const contentEl = menuContent.querySelector('.content');
const naturalWidth = Math.ceil(contentEl.getBoundingClientRect().width) + 32; // +padding
menuContent.style.width = `${naturalWidth}px`;
contentEl.style.width = `${naturalWidth}px`; // 锁定内容区宽度，防重排
});
}
// 绑定点击事件
toggleBtns.forEach(btn => {
btn.addEventListener('click', () => {
const container = btn.closest('.container');
const menuContent = container.querySelector('.menu-content');
const isCollapsed = container.classList.contains('collapsed');
if (isCollapsed) {
// 展开：恢复测量后的宽度
updateMenuWidth();
} else {
// 收起：先记录当前宽度，再设为 0
const currentWidth = parseFloat(getComputedStyle(menuContent).width);
menuContent.style.width = `${currentWidth}px`;
// 强制重排，确保 transition 生效
menuContent.offsetHeight;
menuContent.style.width = '0';
}
container.classList.toggle('collapsed');
});
});
// 首次加载时初始化宽度
updateMenuWidth();
// 可选：监听窗口 resize（如菜单内容动态变化）
let resizeTimer;
window.addEventListener('resize', () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(updateMenuWidth, 150);
});
}
// 启动
document.addEventListener('DOMContentLoaded', initCollapsibleMenu);⚠️ 注意事项与优化建议
- white-space: nowrap 是防文字重排的关键：配合固定 .content 宽度，确保动画过程中文本不换行、不抖动；
- 避免 display: none 与 transition 混用：display 是离散属性，无法过渡，必须用 width / opacity / transform 等连续属性；
- 性能考量：getBoundingClientRect() 在动画中应避免高频调用；本方案仅在折叠/展开触发时执行一次，对性能无影响；
- 无障碍增强：可添加 aria-expanded 和 aria-controls 属性，提升屏幕阅读器支持；
- 移动端适配：建议在小屏下默认折叠，并通过汉堡图标唤出，可结合 @media (max-width: 768px) 控制。
该方案真正实现了「内容决定宽度、动画平滑可控、DOM 高效渲染」三者统一，是生产环境中兼顾体验与可维护性的推荐实践。
