无头 UI“离开”过渡在 React 中不起作用答案

【问题标题】：Headless UI "leave" transition not working in React无头 UI“离开”过渡在 React 中不起作用
【发布时间】：2021-10-30 08:25:29
【问题描述】：

我的导航栏设置为在状态更改时汉堡菜单打开和关闭。虽然enter 动画效果很好，但leave 却不行。我的动画是一个平滑的滑入和滑出，但只有滑入工作，而离开它只是正常关闭。

const NavbarMenu = ({ isOpen, menuClick }) => {
  return (
    <Transition appear={true} show={isOpen}>
      <Transition.Child
        class="flex flex-col bg-yellow-700 fixed top-0 right-0 p-5 z-20 w-1/2 h-full transition ease-in-out duration-300"
        enter="transition-opacity ease-in-out duration-700"
        enterFrom="translate-x-full"
        enterTo="translate-x-0"
        leave="transition-opacity ease-out duration-700"
        leaveFrom="opacity-100"
        leaveTo="opacity-0"
      >
        <Exit className="text-yellow-100 w-1/6" onClick={() => menuClick()} />
        <div className="flex flex-col gap-y-4 mt-10 font-poppins font-bold text-xl text-yellow-100">
          <span>About</span>
          <span>About</span>
          <span>About</span>
        </div>
      </Transition.Child>
    </Transition>
  );
};

【问题讨论】：

标签： reactjs animation transition tailwind-css headless

【解决方案1】：

大多数情况下，“离开过渡”不起作用是因为它在过渡结束之前卸载。要解决这个问题，您需要在转换处于显示模式时触发“状态之间”。然后创建一个监听此状态的 useEffect，并设置一个 setTimeout 来执行元素的实际卸载。

【讨论】：

【解决方案2】：

您的休假过渡缺少 translate-x 课程。

您可能还想将不透明度过渡添加到进入动画中。

这应该可行：

const NavbarMenu = ({ isOpen, menuClick }) => {
  return (
    <Transition appear={true} show={isOpen}>
      <Transition.Child
        class="flex flex-col bg-yellow-700 fixed top-0 right-0 p-5 z-20 w-1/2 h-full transition duration-700"
        enter="ease-in-out"
        enterFrom="translate-x-full opacity-0"
        enterTo="translate-x-0 opacity-100"
        leave="ease-out"
        leaveFrom="translate-x-0 opacity-100"
        leaveTo="translate-x-full opacity-0"
      >
        <Exit className="text-yellow-100 w-1/6" onClick={() => menuClick()} />
        <div className="flex flex-col gap-y-4 mt-10 font-poppins font-bold text-xl text-yellow-100">
          <span>About</span>
          <span>About</span>
          <span>About</span>
        </div>
      </Transition.Child>
    </Transition>
  );
};

【讨论】：