Radix accordion state animation about tailwindcss-radix

[robinvdvleuten]

I figured it out using the following

{
  extend: {
    keyframes: {
      radixCarouselSlideDown: {
        from: { height: 0 },
        to: { height: 'var(--radix-accordion-content-height)' },
      },
      radixCarouselSlideUp: {
        from: { height: 'var(--radix-accordion-content-height)' },
        to: { height: 0 },
      }
    }
  }
}

And then use a custom animation class to trigger the animations

<Accordion.AccordionContent asChild>
  <div className="overflow-hidden radix-state-open:animate-[radixCarouselSlideDown_300ms_ease-in-out] radix-state-closed:animate-[radixCarouselSlideUp_300ms_ease-in-out]">
    {children}
  </div>
</Accordion.AccordionContent>

[ecklf]

Do you have a reproduction at hand? The examples are in the demo folder in this repo.
https://github.com/ecklf/tailwindcss-radix/blob/main/demo/components/accordion.tsx

[cubecleveland]

Wow thanks for the super quick reply.

If trying to achieve a simple slide up and down to the accordion. i went through the demo.... unless im really missing smething it doesnt have animation for slide up and down of content... am i correct ? i want the content itslef to slide up and down rather than just the Chevron...

[ecklf]

You'd want something like in the official radix example then: https://www.radix-ui.com/docs/primitives/components/accordion

[cubecleveland]

Yes, but could u help and tell me how do i actually apply this in the tailwind varinats -- i put this in my animation extend in tailwind config....