如何用Flexbox实现带状态记忆的平滑折叠右侧边栏长尾词？

本文共计1157个文字，预计阅读时间需要5分钟。

本内容介绍一种基于flexbox的响应式右侧边栏折叠方案，支持默认展开、点击切换、本地存储记忆状态、页面加载后无动画过渡，并确保主内容区域随边栏状态自适应缩放。

实现一个真正平滑、无视觉跳变、且尊重用户偏好的可折叠右侧边栏，关键在于分离「状态初始化」与「交互过渡」两个阶段。原方案中使用 position: absolute 配合 transform: translateX(100%) 虽能隐藏侧栏，但会脱离文档流，导致 .main 无法自动伸展；而若直接在初始加载时触发 transition，则会出现页面刷新时的不必要动画（即“从展开→瞬间收缩”的闪烁感）。

✅ 正确解法核心思路

• 状态初始化阶段（无过渡）：页面首次加载时，通过 JS 动态添加 .closed 类，同时禁用 CSS 过渡（transition: none），完成初始布局；
• 交互阶段（启用过渡）：仅在用户点击后，再移除 transition: none，让后续 transform/width 变化产生平滑动画；
• Flexbox 布局保障流式响应：利用 flex-grow/flex-shrink + width: 0 组合，使 .main 和 .sidebar 在 .closed 状态下自然重分配空间，无需绝对定位。