Why is my css animation not working on closing the element using React useState hook

Question

I have build a sliding submenu with React, Typescript and Tailwind.

The related submenu is showing using React useState hook.

Why is my close css animation not working data-[state=closed]:animate-[submenu-hide_300ms]? The open animation data-[state=open]:animate-[submenu-show_300ms] works.

How to fix this?

Update: Instead of doing:

{clickedItem === item && (
        <ul
          data-state={dataSate}
          className="fixed top-0 flex h-svh w-[300px] flex-col bg-red-300 ease-in data-[state=closed]:animate-[submenu-hide_300ms] data-[state=open]:animate-[submenu-show_300ms]"
        >
          <li>
            <button
              onClick={() => setClickedItem(null)}
              type="button"
              className="flex items-center p-2"
            >
              <span className="mr-10">Back</span>
              <span className="font-bold">{item.title}</span>
            </button>
          </li>
          {item.items?.map((item) => (
            <li key={item.url}>
              {item.items && item.items.length > 0 ? (
                <button
                  onClick={() => handleClick(item)}
                  className="flex w-full justify-between p-2"
                  type="button"
                >
                  {item.title}
                  <span>[+]</span>
                </button>
              ) : (
                <a href={item.url} className="p-2">
                  {item.title}
                </a>
              )}
            </li>
          ))}
        </ul>
       )}

I tried the following (show/hide it with css instead of React useState), but the animation is still not working when hiding the element?:

            <ul
              data-state={dataSate}
              className={`${clickedItem === item ? 'left-0 animate-[submenu-show_300ms]' : 'left-[-375px] animate-[submenu-hide_300ms] overflow-hidden'} fixed top-0 flex h-svh w-[375px] flex-col bg-red-300 ease-in`}
            >
              <li>
                <button
                  onClick={() => setClickedItem(null)}
                  type="button"
                  className="flex items-center p-2"
                >
                  <span className="mr-10">Back</span>
                  <span className="font-bold">{item.title}</span>
                </button>
              </li>
              {item.items?.map((item) => (
                <li key={item.url}>
                  {item.items && item.items.length > 0 ? (
                    <button
                      onClick={() => handleClick(item)}
                      className="flex w-full justify-between p-2"
                      type="button"
                    >
                      {item.title}
                      <span>[+]</span>
                    </button>
                  ) : (
                    <a href={item.url} className="p-2">
                      {item.title}
                    </a>
                  )}
                </li>
              ))}
            </ul>

clickedItem === item condition is not true as Back button resets the value. Because of that, ReactJS doesn't show the component. And, if component is not exists then no css will trigger. — Ravi Nain
– Ravi Nain, Commented Dec 2, 2024 at 12:04
@RaviNain Thanks, I updated my question. Do you have an idea why it's not working? — meez
– meez, Commented Dec 2, 2024 at 12:29

Ravi Nain · Accepted Answer · 2024-12-02 21:46:08Z

0

You will need to fix the css, hide should transform from 300px to 0.

@keyframes submenu-hide {
  from {
    opacity: 1;
    transform: translateX(300px);
  }

  to {
    opacity: 0;
    transform: translateX(0);
  }
}

See working example: https://codesandbox.io/p/devbox/slide-menu-transition-p4t8mm

answered Dec 2, 2024 at 21:46

Ravi Nain

6751 gold badge8 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why is my css animation not working on closing the element using React useState hook

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related