当使用 Tailwind CSS 单击按钮时，从屏幕左侧制作侧边栏滑动答案

【问题标题】：Make a sidebar slide from the left side of the screen when a button is clicked with Tailwind CSS当使用 Tailwind CSS 单击按钮时，从屏幕左侧制作侧边栏滑动
【发布时间】：2021-12-23 05:31:42
【问题描述】：

目前，当我单击按钮时，它会显示/关闭侧边栏但没有任何过渡，它应该来自左侧。

它适用于“普通 css”，但我不知道如何使用 Tailwind 创建这种效果。

这是代码：

// this function sets the toggle the value of isOpened so it shows/hides the element

  const handleChange = (event: React.MouseEvent) => {
    setSidebarState(!isOpened);
    onChange && onChange(event, isOpened);
  };

// styling so far

    <div className='w-12 h-12 bg-red-700 '>
      <button onClick={handleChange}>click me</button>
      <div className={`h-screen mt-5 fixed z-10 left-0 w-max transition-all  ${isOpened ? 'hidden' : ''}`}>
        ... // content
     </div>
    </div>

有什么想法吗？

【问题讨论】：

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

【解决方案1】：

您的问题出在 hidden 类中，hidden 等于 css 中的 display 属性，并且无法设置动画。您可以使用 opacity 代替 hidden。

如果 hidden 类对您来说是一个关键方法并且需要将其从 DOM 中删除，请使用 react 动画库或创建您自己的 css 类并使用setTimout 处理它们。

动画类型不可动画MDN

<div className="w-12 h-12 bg-red-700 ">
  <button onClick={handleChange}>click me</button>
  <div className={`h-screen mt-5 fixed z-10 left-0 w-max transition-all ${isOpened ? 'opacity-100' : 'opacity-0'}`}>
   ... // content
  </div>
</div>

【讨论】：