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

Question

目前，当我点击按钮时，它 shows/closes 边栏但没有任何过渡，它应该来自左侧。

它与“正常 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>

有什么想法吗？

Answer 1

你的问题是在hiddenclass,hidden等于display属性在 css 中，这不能设置动画。您可以使用 opacity 而不是 hidden.

如果隐藏 class 对您来说是一个关键方法，需要将其从 DOM 中删除，请使用 React 动画库或创建您自己的 css classes 并用 setTimout.

处理它们

Animation type Not animatable 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>

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

Make a sidebar slide from the left side of the screen when a button is clicked with Tailwind CSS

html

css

css-transitions

reactjs

tailwind-css