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

Question

Currently, when I click the button it shows/closes the sidebar but without any transition, it should come from the left side.

It works fine with "normal css" but I don't know how to create this effect with Tailwind.

This is the code:

// 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>

Any ideas?

Answer 1

Your problem is in a hidden class, hidden is equal to the display property in css and this can't be animated. You can use opacity instead hidden .

If hidden class is a critical method for you and need remove it from the DOM use a react animation library or create you own css classes and handle them with 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>