使用 TailwindCSS 单击按钮时，使侧边栏从左侧滑入

Posted 2023-03-06

【中文标题】使用 TailwindCSS 单击按钮时，使侧边栏从左侧滑入

【英文标题】：Make sidebar slide in from the left when the button is clicked with TailwindCSS

【发布时间】：2021-12-24 20:47:39

【问题描述】：

有一个侧边栏菜单和一个显示/隐藏侧边栏的按钮。问题是我不知道如何让它出现时从左侧滑入。关闭时也可以滑回屏幕右侧。

到目前为止，这是我的代码：

  const myClass = clsx(
    'transition duration-300 h-screen mt-5 fixed z-10 left-0 w-80 ': true,
    'opacity-0': open,
    'opacity-100': !open
  );
....

      return (
        <div className='w-8 h-8'>
          <button onClick=toggleSideBar></button>
          <div className=containerClasses>
            ...
          </div>
        </div>
      );

我想它应该添加一些关于 isOpened 的内容，当它关闭或打开时，尝试使用 Tailwind's transition property 但它没有成功。

【参考方案1】：

@Szaman 写的想法很有帮助，这是解决上述问题的方法：

  const myClass = clsx(
    'transition-all duration-1000 h-screen mt-5 fixed z-10 ': true,
    '-left-80 w-80': open,
    'left-0 w-80': !open
  );

【参考方案2】：

尝试添加类 transition-all (docs) 和一些持续时间，例如duration-500。然后不是操纵不透明度，而是操纵偏移。使您的侧边栏位置绝对，并在未打开时添加负的left 偏移量（例如-left-36），并在打开时将其更改为left-0。

查看这个在页面悬停时滑动侧边栏的实时示例：

https://play.tailwindcss.com/BpHgqXmmYm