[Bug]: Collapsible no longer animates

[MrHedgehogEsquire]

Reproduction

Install latest collapsible

Describe the bug

It seems the collapsible no longer smoothly animates. Is this intentional or a mistake?

My old one was like this:

  v-bind="props" 
  class="overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down"
>
  <slot />
</CollapsibleContent>

System Info

-  System:
    OS: Windows 10 10.0.19045
    CPU: (12) x64 Intel(R) Core(TM) i7-8700K CPU @ 3.70GHz
    Memory: 10.96 GB / 31.92 GB
  Binaries:
    Node: 22.13.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - C:\Users\AppData\Roaming\npm\yarn.CMD
    npm: 11.6.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 142.0.7444.176
    Edge: Chromium (140.0.3485.54)
    Firefox: 145.0.1 - C:\Program Files\Mozilla Firefox\firefox.exe
    Internet Explorer: 11.0.19041.5794

Contributes

• I am willing to submit a PR to fix this issue
• I am willing to submit a PR with failing tests

[jevin98]

@sadeghbarati

There does seem to be a difference here.

shadcn-ui maintains consistency with radix-ui, which has no animations.

However, reka-ui does have animations.

[sadeghbarati]

Will add it back, I have to check the collapsible code history

PR welcomed

[jevin98]

Will add it back, I have to check the collapsible code history

I'm sorry, I didn't understand that sentence.

Do you mean that to be consistent with reka-ui, we need to add animations?

[jevin98]

pr

It appears this PR removed the animation class from CollapsibleContent.

This was likely done to maintain consistency with shadcn-ui.

[sadeghbarati]

We copied the classes from the main shadcn ui to our Vue registry

Might removed the animation from the collapsible component

---

If you guys need collapsible animation

CollapsibleContent.vue:

<script setup lang="ts">
import type { CollapsibleContentProps } from "reka-ui"
import { CollapsibleContent } from "reka-ui"

const props = defineProps<CollapsibleContentProps>()
</script>

<template>
  <CollapsibleContent
    data-slot="collapsible-content"
+   class="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down"
    v-bind="props"
  >
    <slot />
  </CollapsibleContent>
</template>