Tailwind Headless UI Transition on y axis wont work

Question

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

As the title says. The transition for y axis does not work. But if I change y into x the transform transition does work. I am using Disclosure to show and hide the panel

I did try removing the fixed class but it goes with the body content not above it.

Answer 1

No Y-axis transition occurs because translateY(100%) and translateY(0) are the same for the element you applied it to.

The 100% in translateY(100%) is relative to the height of the element it is applied to, so for an element with 0 height:

translateY(100%) is equivalent to translateY(0). The element has 0 height since its only child element has position: fixed, taking the child out of the layout flow. The element has no other child elements so it would resolve to 0 height.

To work around this, you could consider transitioning from some length value that does not depend on the height of the element itself. For example, once could infer that you'd like to transition the height of the viewport, so we could use 100vh:

<Transition
  show={open}
  enter="transform transition ease-in-out duration-300 "
  enterFrom="translate-y-[100vh] 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-[100vh] opacity-0"
>

See this StackBlitz project of this code working.