Jak dodac animacje do Collapsible

Hej, korzystam z shadcn i sa tam dwa komponenty: https://ui.shadcn.com/docs/components/collapsible oraz https://ui.shadcn.com/docs/components/accordion. W obu zmienia sie atrybut data-state. Jak moge stworzyc identyczna animacje dla komponentu collapsible jak ta ktora jest dla accordion? Bo ten accordion korzysta z keyframes i nie do konca rozumiem jak to dziala a probowalem sam zrobic tak ale nic sie nie dzieje:

[data-state='closed'] {
  height:0;
}

[data-state='open'] {
  height: auto;
  transition: height 0.2s ease-out;
}

Po pierwsze to transition: height 0.2s ease-out; daj na elemencie który ma się animować a nie na jednym stanie bo inaczej tylko przejście do tego stanu będzie animowane.
Po drugie to nie zadziała z height: auto musisz podać konkretną wielkość jeśli chcesz animację no i overflow: hidden żeby pozwolić na mniejszy rozmiar niż treść. Poza tym powinno działać.
Niestety żeby wysokość się animowała do dynamicznej musisz użyć jakiejś sztuczki, najczęściej trochę javascripta
https://carlanderson.xyz/how-to-animate-on-height-auto/
Pamiętaj że jeśli chcesz wyliczyć wysokość elementu javascriptem to żeby to połączyć z media query i reagować na zmiany rozmiaru okna, inaczej treść się nie zmieści w elemencie po zwinięciu i zmniejszeniu rozmiaru okna.