如何通过Framer Motion实现左栏隐藏动画与右栏自适应填充（含左栏最小宽度）

核心问题在于你之前只做了侧边栏的位移动画，但没有移除它在布局中的占位空间，导致右侧栏无法自动填充。结合Framer Motion的状态控制和Tailwind的flex布局属性，可按以下步骤修改：

1. 调整整体布局为Flex结构 #

确保外层容器使用flex布局，同时给右侧栏添加flex-1类，让它能自动填充剩余空间：

<div className="flex h-screen">
  {/* 左侧侧边栏 */}
  {/* 右侧内容区 */}
  <div className="flex-1 bg-gray-100 p-4">
    {/* 右侧内容 */}
  </div>
</div>

2. 同步控制侧边栏的位移与宽度 #

单纯的translateX只会让侧边栏视觉上隐藏，但布局仍会保留它的宽度占位。需要在隐藏状态时，将侧边栏的宽度设为0，配合位移动画彻底移除占位：

<motion.div
  className={`bg-gray-800 text-white ${
    sidebarOpen ? "min-w-[240px] p-4" : "w-0 overflow-hidden p-0"
  }`}
  animate={{
    x: sidebarOpen ? 0 : "-100%",
    width: sidebarOpen ? "auto" : 0
  }}
  transition={{ duration: 0.3 }}
>
  <button onClick={() => setSidebarOpen(!sidebarOpen)}>
    {sidebarOpen ? "隐藏" : "显示"}
  </button>
  {/* 侧边栏其他内容 */}
</motion.div>

关键逻辑说明 #

• 显示状态：通过min-w-[240px]保证侧边栏不会小于指定宽度，width: auto让它根据内容自适应（也可设固定宽度）。
• 隐藏状态：w-0直接将宽度设为0，配合overflow-hidden截断溢出内容，x: "-100%"完成向左滑出的动画，同时右侧栏的flex-1会自动填充整个剩余空间。
• 细节优化：隐藏时移除侧边栏的内边距，避免因padding导致的微小占位残留。

这样修改后，就能实现点击按钮时侧边栏动画隐藏，右侧栏自动铺满可用空间，同时保留显示时的最小宽度限制。

内容的提问来源于stack exchange，提问作者strangeQuirks