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

Question

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

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

  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 的过渡属性，但没有成功。

Answer 1

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

查看这个实时示例，其中当页面悬停时我滑动侧边栏：

https://play.tai​​lwindcss.com/BpHgqXmmYm