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

Posted 2023-03-06

【中文标题】当使用 Tailwind CSS 单击按钮时，从屏幕左侧制作侧边栏滑动

【英文标题】：Make a sidebar slide from the left side of the screen when a button is clicked with 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>

有什么想法吗？

【参考方案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>