vue-collapsed
A Vue component for dynamic CSS height transitions from any value to auto and vice versa, perfect for accordions.
What is vue-collapsed?
Vue Collapsed is a Vue component library that enables smooth CSS height transitions between fixed heights and `auto` values. It solves the common problem of animating height to accommodate dynamic content, such as in accordions or expandable panels, using a declarative Vue API. The component handles transition timing, accessibility, and reduced motion preferences automatically.
Vue developers building interactive UIs with collapsible sections, such as accordions, expandable cards, or togglable content areas. It's particularly useful for those needing reliable height animations without manual CSS workarounds.
Developers choose Vue Collapsed because it provides a zero-dependency, lightweight solution specifically for Vue that handles the tricky `height: auto` transition seamlessly. Its automatic duration calculation and built-in accessibility features reduce boilerplate while offering fine-grained control via custom transitions and lifecycle events.
Overview
Dynamic CSS height transition from any value to auto and vice versa for Vue. Accordion ready.
Use Cases
Best For
- Building accessible accordion components in Vue applications
Related Projects
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
