Question: Ideas on transitioning height with <Transition />?

I know CSS doesn’t let you transition height: 0 to height: auto so just curious if you’ve thought about any ways to accomplish this with the <Transition /> component.

I was thinking of bringing in a hook to calculate the final height of the DOM node but then I think I’d need another API to pass it to <Transition />, maybe enterToStyle?

<Transition
  show={open}
  enter="transition ease-out"
  enterFrom="transform h-0 opacity-0"
  enterTo="transform h-40 opacity-100"
  enterToStyle={{
    height: finalHeight
  }}
>

Something like this. Any thoughts?

[thien-do]

Hey guys, I actually found a way to animating “height” using Tailwind and HeadlessUI’s Transition component 😄 the key is to programmatically set the height before the animation happens:

.height-0-important {
  height: 0 !important; /* to win the inline style we set */
}

<Transition
  enter="transition, you know the stuff"
  enterFrom="height-0-important"
  enterTo="" /* don't need this! */
  beforeEnter={() => {
	  const elm = panel.current; /* React's ref */
	  elm.parentElement.style.height = `${elm.clientHeight}px`;
  }}
>
  <Disclosure.Panel ref={panel}>
    {props.item.answer}
  </Disclosure.Panel>

[farmerpaul]

Here’s my TypeScript-friendly version of @thien-do’s suggested implementation (brilliant, @thien-do!) with the addition of the following:

• included the leave transition
• content height will continue to resize appropriately based on its content and container/window after transition is complete
• updated for Tailwind 3 (no extra CSS classes need to be defined)

  const ref = useRef<HTMLDivElement>(null);
  const [shown, setShown] = useState(false);

  const captureHeight = () => ref.current && (ref.current.style.height = `${ref.current.clientHeight}px`);
  const clearHeight = () => ref.current && (ref.current.style.height = '');

  return (
    <Transition
      ref={ref}
      show={shown}
      enter="transition-[height] duration-300 overflow-hidden"
      enterFrom="!h-0"
      beforeEnter={captureHeight}
      afterEnter={clearHeight}
      leave="transition-[height] duration-300 overflow-hidden"
      leaveTo="!h-0"
      beforeLeave={captureHeight}
      afterLeave={clearHeight}
    >
      <div>Some variable height content</div>
    </Transition>
  );