add h-*/w-* size utilities of the content when it opens/closes

[domosedov]

Animating content size

Use the --radix-accordion-content-width and/or --radix-accordion-content-height CSS variables to animate the size of the content when it opens/closes.

<Accordion.Content forceMount className="overflow-hidden">
  <Transition
    show={currentItem === "item-1"}
    enter="ease-out duration-300"
    enterFrom="h-0"
    enterTo="h-radix-accordion"
    leave="ease-in duration-300"
    leaveFrom="h-radix-accordion"
    leaveTo="h-0"
  >
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit.
      Voluptatum ullam, ratione veniam voluptate nobis sunt laboriosam
      aperiam harum fugit corrupti alias magnam officiis nihil minima
      eum excepturi natus similique? Cupiditate reprehenderit, hic sequi
      modi nemo odit esse quas adipisci perferendis beatae deserunt
      ducimus itaque molestias quibusdam porro assumenda laudantium id!
    </p>
  </Transition>
</Accordion.Content>

Accordion docs Collapsible docs

[vercel[bot]]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/ecklf/tailwindcss-radix/4fQ4QJj5PB3GrrgfgZHh2CXJvakk
✅ Preview: https://tailwindcss-radix-git-fork-domosedov-main-ecklf.vercel.app

[MildTomato]

@ecklf I've just been using this like this:

<RadixAccordion.Content forceMount className="overflow-hidden">
  <Transition
    show={currentItems?.includes(id) ? true : false}
    enter="ease-out duration-300"
    enterFrom="h-0"
    enterTo="h-radix-accordion"
    leave="ease-in duration-300"
    leaveFrom="h-radix-accordion"
    leaveTo="h-0"
  >
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum ullam,
      ratione veniam voluptate nobis sunt laboriosam aperiam harum fugit
      corrupti alias magnam officiis nihil minima eum excepturi natus similique?
      Cupiditate reprehenderit, hic sequi modi nemo odit esse quas adipisci
      perferendis beatae deserunt ducimus itaque molestias quibusdam porro
      assumenda laudantium id!
    </p>
  </Transition>
</RadixAccordion.Content>

So it works fine, but it only animates when closing.

It seems that --radix-collapsible-content-height is only ever set when the accordion item is open.

Anybody got any ideas?

[ecklf]

@ecklf I've just been using this like this:

<RadixAccordion.Content forceMount className="overflow-hidden">
  <Transition
    show={currentItems?.includes(id) ? true : false}
    enter="ease-out duration-300"
    enterFrom="h-0"
    enterTo="h-radix-accordion"
    leave="ease-in duration-300"
    leaveFrom="h-radix-accordion"
    leaveTo="h-0"
  >
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum ullam,
      ratione veniam voluptate nobis sunt laboriosam aperiam harum fugit
      corrupti alias magnam officiis nihil minima eum excepturi natus similique?
      Cupiditate reprehenderit, hic sequi modi nemo odit esse quas adipisci
      perferendis beatae deserunt ducimus itaque molestias quibusdam porro
      assumenda laudantium id!
    </p>
  </Transition>
</RadixAccordion.Content>

So it works fine, but it only animates when closing.

It seems that --radix-collapsible-content-height is only ever set when the accordion item is open.

Anybody got any ideas?

Just gave it a try and it indeed seems to be not working properly with the Transition component.

@domosedov did you encounter this issue and managed to fix it? Elsewise we should probably remove the usage with headlessui for the Accordion and make an example with a different framework like framer motion.