React项目中Headless UI的leave过渡动画无法正常运行问题咨询

云原生阿岚

2026-10-5

问题原因及修复方案

1. 标签属性书写错误
  React框架下元素的样式类属性为className，你代码中Transition.Child标签用了原生HTML的class，导致自带的样式属性无法正确识别，同时会干扰Headless UI的动画类注入逻辑。
1. 入场离场动画逻辑不匹配
  你入场动画控制的是横向位移，离场动画却仅配置了透明度变化，且transition-opacity类仅会对透明度属性生效，无法触发位移过渡；同时元素自带的300ms过渡和Transition组件配置的700ms过渡时序冲突，导致动画异常。
1. 离场属性缺失位移配置
  你当前的离场配置没有设置位移动画的终点，导致菜单触发关闭时直接被卸载，看不到过渡效果。

修正后的代码

const NavbarMenu = ({ isOpen, menuClick }) => {
  return (
    <Transition appear={true} show={isOpen}>
      <Transition.Child
        className="flex flex-col bg-yellow-700 fixed top-0 right-0 p-5 z-20 w-1/2 h-full"
        enter="transition ease-in-out duration-700"
        enterFrom="translate-x-full opacity-0"
        enterTo="translate-x-0 opacity-100"
        leave="transition ease-out duration-700"
        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>
  );
};