bug: Accordion not animating height

[MentalGear]

What version of daisyUI are you using?

4.4.17

Which browsers are you seeing the problem on?

Chrome, Firefox

Reproduction URL

https://daisyui.com/components/accordion/

Describe your issue

Is it intentional that the accordion element does not transition its height property? Opening the accordion element looks jerky, as only the padding transition is animated, and the content just pops in. I tested it out with setting transition: 0.2s ease (all props) and the result looks much smoother.

[github-actions[bot]]

Thank you @MentalGear for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[saadeghi]

Can you attach a video? I can't see the issue you described.

[hughlv]

@MentalGear I met similar issues before, later on I managed to work out by changing class from collapse-arrow to collapse-plus. Maybe you can have a try.

Here is my working code:

<div className="collapse collapse-plus text-sm mb-1 rounded-sm" key={c.title}>
  <input type="checkbox" className="peer" />
  <div className={`collapse-title px-2 peer-checked:text-secondary peer-checked:bg-base-content/5`}>
    <span>{t(c.title as any)}</span>
  </div>
  <div className="collapse-content px-1 flex flex-col gap-1 peer-checked:bg-base-content/5">
    { content here... }
  </div>
</div>

[MentalGear]

Thx but will just use customs for thisOn Dec 7, 2023, at 10:43, Hugh Lyu @.***> wrote: @MentalGear I met similar issues before, later on I managed to work out by changing class from collapse-arrow to collapse-plus. Maybe you can have a try. Here is my working code:

{t(c.title as any)}

{ content here... }

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: @.***>