Add animation to accordion's content

[balcieren]

While content is opening and closing, I want to add animations but how is this possible ?

[ecklf]

I'd refer to the official radix example for this. Also this section: https://www.radix-ui.com/docs/primitives/components/accordion#content

[Johnrobmiller]

Could this be one of the problems this library solves? Seems like a potentially valuable feature to me

[Johnrobmiller]

This was very tricky to implement. You cannot name the animation "slideDown". It must be named "slide-down".

Dont do this: 'slideDown': 'slideDown 300ms linear' Do this: 'slide-down': 'slide-down 300ms linear'

Also, this is how to call those animations in the tailwind class: data-[state="open"]:animate-slide-down data-[state="closed"]:animate-slide-up

...and here are the keyframes to stick in tailwind.config:

        "slide-down": {
          '100%': {
            height: "var(--radix-accordion-content-height)"
          },
          '0%': {
            height: 0
          }
        },
        "slide-up": {
          '0%': {
            height: "var(--radix-accordion-content-height)"
          },
          '100%': {
            height: 0
          }
        }