Tailwind Headless UI Y轴Transition过渡不生效问题求助

问题出在fixed定位元素缺少明确的位置锚点，导致Y轴位移的基准计算错误，过渡效果无法正常触发。以下是两种可行的修改方式：

方式一：给Disclosure.Panel补充定位锚点 #

给Disclosure.Panel添加inset-0类，让fixed元素完全覆盖视口，明确位移基准：

<Disclosure as="div" className="text-white">
  {({ open }) => (
    <>
      <Disclosure.Button className="md:hidden inline-block">
        {open ? <XMarkIcon className='block h-8' /> : <Bars3Icon className="block h-8" />}
      </Disclosure.Button>

      <Transition
        show={open}
        enter="transform transition ease-in-out duration-300"
        enterFrom="translate-y-full opacity-0"
        enterTo="translate-y-0 opacity-100"
        leave="transform transition ease-in-out duration-300"
        leaveFrom="translate-y-0 opacity-100"
        leaveTo="translate-y-full opacity-0"
      >
        <Disclosure.Panel as='div' className="fixed inset-0 md:hidden">
          <div className='h-screen w-screen bg-gray-500 p-5 text-center'>
            <ul>
              <li>asd</li>
            </ul>
          </div>
        </Disclosure.Panel>
      </Transition>
    </>
  )}
</Disclosure>

方式二：将fixed定位移至内部容器 #

把fixed属性放到内部的内容容器上，确保Transition直接作用在带定位的元素上：

<Disclosure as="div" className="text-white">
  {({ open }) => (
    <>
      <Disclosure.Button className="md:hidden inline-block">
        {open ? <XMarkIcon className='block h-8' /> : <Bars3Icon className="block h-8" />}
      </Disclosure.Button>

      <Transition
        show={open}
        enter="transform transition ease-in-out duration-300"
        enterFrom="translate-y-full opacity-0"
        enterTo="translate-y-0 opacity-100"
        leave="transform transition ease-in-out duration-300"
        leaveFrom="translate-y-0 opacity-100"
        leaveTo="translate-y-full opacity-0"
      >
        <Disclosure.Panel as='div' className="md:hidden">
          <div className='fixed inset-0 h-screen w-screen bg-gray-500 p-5 text-center'>
            <ul>
              <li>asd</li>
            </ul>
          </div>
        </Disclosure.Panel>
      </Transition>
    </>
  )}
</Disclosure>

原理说明 #

默认情况下，fixed元素会停留在它在文档流中的原始位置，此时translate-y-full的位移基准不是视口高度，导致过渡效果看起来不生效。添加inset-0类（等价于top-0 right-0 bottom-0 left-0）后，fixed元素会完全覆盖视口，此时translate-y-full会让元素从视口下方完整滑入/滑出，过渡效果正常触发。

内容的提问来源于stack exchange，提问作者maestro