CODEWITHSUNDEEP
javascriptcssreactjstailwind-css
DaveDave
DaveDave

Reputation: 303

How to transition div using Tailwindcss in React

I have a Menu panel next to my sider. I am trying to add a drawer type animation however I can't seem position open/close within the pink column

const album = ["Album1", "Album2", "Album3"];
export const Menu = () => {
  const [open, setOpen] = useState(false);
  return (
    <div className="flex flex-1 flex-col p-3">
      <h2 className="text-lg font-medium text-gray-900">Album</h2>
      <div className="flex-1">
        <div className="flex flex-1 flex-col space-y-3 py-3">
          {album.map((name) => (
            <button
              key={name}
              id={name}
              className={`flex space-x-2 items-center`}
              onClick={() => setOpen(true)}
            >
              <span>{name}</span>
            </button>
          ))}
        </div>
      </div>
      <aside
        onClick={() => setOpen(false)} //temporary
        className={`transform top-0 left-0 w-72 bg-blue-400 fixed h-full overflow-auto ease-in-out transition-all duration-1000 z-30 ${
          open ? "translate-x-14" : "-translate-x-full"
        }`}
      >
        hello
      </aside>
    </div>
  );
};

enter image description here

Upvotes: 3

Views: 1802

Answers (1)

S. Wasta
S. Wasta

Reputation: 648

Javascript. Just add a eventListener to the 'button' which will handle the actions. In the eventListener, remove or add a css class. For example, by default the position is '-100px right' with css set position to '300px right', also add a transition 'all 300ms ease'. Now you element start with no css, and when user press button add the class.

<div class="text-3xl font-bold underline transition-all duration-300" id="must-change">
 Lorem Ipsu
</div>

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold p-3 rounded" id="press-me">
  Button
</button>

<script>
const btn = document.querySelector("#press-me")
const mustChange =  document.querySelector("#must-change")
btn.addEventListener("click", () => {
  mustChange.classList.toggle("font-bold")
})
</script>

I set 'transition all' but you can use a specific transition if you want.

Upvotes: 1

Related Questions