如何使用TailwindCSS实现点击按钮侧边栏左滑入、关闭右滑出的效果

你当前的代码仅通过透明度控制侧边栏显隐，没有配置水平位移的过渡，因此无法实现滑入滑出效果；同时当前的透明度规则语义和open变量相反，不符合常规使用逻辑。

调整后代码 #

首先修改侧边栏的样式配置：

const containerClasses = clsx({
  // 固定公共样式：明确指定位移和透明度参与过渡
  'transition-[transform,opacity] duration-300 ease-in-out h-screen mt-5 fixed z-10 top-0 left-0 w-80': true,
  // 关闭状态：侧边栏完全移出左侧视口，透明不可见
  '-translate-x-full opacity-0': !open,
  // 打开状态：侧边栏回到视口左侧原位，完全显示
  'translate-x-0 opacity-100': open,
});

组件结构保持原有逻辑即可：

return (
  <div className='w-8 h-8'>
    <button onClick={toggleSideBar}></button>
    <div className={containerClasses}>
      {/* 侧边栏内容 */}
    </div>
  </div>
);

可选调整项 #

• 如果你需要实现「关闭时向右侧滑出视口」的效果，只需要把关闭状态的-translate-x-full修改为translate-x-full即可。
• 如果你不希望侧边栏悬浮覆盖页面主内容，可以给主内容容器添加同步过渡：主内容容器绑定ml-0（关闭状态）和ml-80（打开状态）的样式，同时添加transition-all duration-300类，实现主内容随侧边栏滑入同步右移的效果。
• 如果你的open变量原逻辑是true对应侧边栏隐藏，只需要把两个状态的判断条件互换即可。

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