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

【问题标题】：Make sidebar slide in from the left when the button is clicked with TailwindCSS使用 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 但它没有成功。

【问题讨论】：

标签： html css reactjs css-transitions tailwind-css

【解决方案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

【讨论】：