为什么我的CSS动画无法使用React useState钩子关闭元素

Question

我用 React、Typescript 和 Tailwind 构建了一个滑动子菜单。

使用 React useState 钩子显示

相关

子菜单。

请参阅此处的工作代码沙箱。

为什么我的关闭CSS动画不起作用

data-[state=closed]:animate-[submenu-hide_300ms]

？打开动画

data-[state=open]:animate-[submenu-show_300ms]

有效。

如何解决这个问题？

更新： 而不是做：

{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>
       )}

我尝试了以下方法（使用css而不是React useState显示/隐藏它），但是当隐藏元素时动画仍然不起作用？：

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

Answer 1

您需要修复 css，隐藏应从 300px 转换为 0。

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

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

参见工作示例：https://codesandbox.io/p/devbox/slide-menu-transition-p4t8mm