我正在尝试将过渡效果应用于此列表项，以便它可以在显示菜单的按钮单击时滑出

Question

我试图让所有列表项在单击按钮时滑出（按钮有状态）
我不明白为什么代码不能使动画工作，当我单击按钮时，所有列表项都已经完全消失，就好像动画已完成一样。
我正在使用 Tailwind.css 来设置组件的样式，我想对我的应用程序的移动版本产生这种效果，因为如您所见，我在

:

运算符的另一端有大屏幕属性。
这是代码，我只提供一个列表项的代码

<div
  className={
    social
      ? "lg:flex fixed flex-col top-[35%] left-0"
      : "hidden lg:flex fixed flex-col top-[35%] left-0"
  }
>
  <ul>
    <li
      className={
        social
          ? `w-[140px] h-[45px] flex justify-between items-center ml-[-100px] ${
              social
                ? "transform transition-all translate-x-24 duration-300"
                : null
            } bg-blue-600`
          : "w-[160px] h-[60px] flex justify-between items-center ml-[-100px] hover:ml-[-10px] duration-300 bg-blue-600"
      }
    >
      <a
        className="flex justify-between items-center w-full text-gray-300"
        href="https://www.linkedin.com/in/radosav-perisic-58ab96265/"
      >
        Linkedin <FaLinkedin size={social ? 20 : 30} />
      </a>
    </li>
    //...
  </ul>
</div>;

我尝试了 tailwind css 属性的各种组合来使效果起作用，但到目前为止没有任何效果。