The accordion animation fails to work correctly when attempting to open it.

[Cristhianzl]

Hello,

The accordion animation is not functioning as expected when attempting to open it (but works normally when It closes). Currently, the animation fails to smoothly expand the accordion content, resulting in a jarring visual experience for the users.

Expected Behavior: When opening the accordion, the animation should smoothly expand the accordion content from a collapsed state to its full height, providing a visually pleasing transition.

Actual Behavior: The accordion animation does not work correctly. It either shows no animation at all or exhibits a sudden jump, instantly displaying the expanded state without any smooth transition.

keyframes: {
  "accordion-down": {
    from: { height: "0" },
    to: { height: "var(--radix-accordion-content-height)" },
  },
  "accordion-up": {
    from: { height: "var(--radix-accordion-content-height)" },
    to: { height: "0" },
  },
},
animation: {
  "accordion-down": "accordion-down 0.2s ease-out",
  "accordion-up": "accordion-up 0.2s ease-out",
}

I'm attaching the dialog.tsx file and the tailwind.config file for a more thorough analysis. Thanks in advance.

dialog.zip tailwind.config.zip

[catz]

Hello @Cristhianzl

What was the issue? Experiencing the same behaviour.

[Cristhianzl]

Hi @catz,

To solve the issue, you can add the following class to your Accordion Component:

<AccordionContent className="AccordionContent"> {children} </AccordionContent>

Then, declare the corresponding styles in your index.css file: .AccordionContent { overflow: hidden; } .AccordionContent[data-state='open'] { animation: slideDown 300ms ease-out; } .AccordionContent[data-state='closed'] { animation: slideUp 300ms ease-out; }

Additionally, make sure to remove the animations related to ShadCN from your tailwind.config.js file:

keyframes: { slideDown: { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)"}, }, slideUp: { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "slideDown 300ms ease-out", "accordion-up": "slideUp 300ms ease-in", },

These changes should resolve the issue you were facing. Let me know if you need any further assistance!

[catz]

Hi @Cristhianzl

This seems a bit strange. Hardcoded height, removed shadcn animations. Don't you think it should work out of the box without such hacks ?

[Cristhianzl]

@catz Sorry, I took that code from a previous branch. var(--radix-accordion-content-height) should be the height.

Anyway, it didn't work. It started working as expected only when I used the Radix CSS.

[shug0]

Hello, I noticed that adding classes to the className property of AccordionContent produce laggy animation.

Since there is already a children wrapping some class in the content I changed my component like this to move the className overwrite to the children component and now my opening is smooth:

const AccordionContent = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <AccordionPrimitive.Content
    ref={ref}
    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
    {...props}
  >
    <div className={cn('pb-4 pt-0', className)}>{children}</div>
  </AccordionPrimitive.Content>
));

[shadcn]

Fixed in #1670

[donttouchmylancable]

I had the problem, that i removed the value inside the accordion item. After adding it back, it worked for me again. <AccordionItem value={item-${i}}> (but with ` around the item-${i}) I used it in a list and forgot to add the item index. Without value, it did not open for me. Hope that helps anyone.

[Niluminda007]

make sure its coming from shad-cn not radix i had the same issue

[vmnog]

Super stupid mistake that can happen sometimes, make sure you didn't put this animation and keyframes inside the wrong "{}" object. :face_exhaling:

[raumildhandhukia]

Hi @Cristhianzl

This seems a bit strange. Hardcoded height, removed shadcn animations. Don't you think it should work out of the box without such hacks ?

I had the same issue, but the problem was, vscode auto imported the Accordion from Radix. Make sure you import from shadcn/ui not radix/ui. Hope it works for you too :)