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
- Creating smooth expand/collapse animations for dynamic content
- Implementing togglable FAQ sections or disclosure widgets
- Animating height transitions between fixed and auto values without CSS hacks
- Adding collapsible panels to admin dashboards or content-heavy UIs
- Ensuring motion preferences are respected in interactive Vue components
Not Ideal For
- Projects using JavaScript frameworks other than Vue (e.g., React or Angular)
- Teams wanting pre-styled, drop-in accordion components without writing custom CSS
- Applications requiring complex, multi-step animations beyond simple height transitions
- Large-scale projects needing a comprehensive animation library with utilities for various effects like fades or slides
Pros & Cons
Pros
The library has no dependencies and a minimal bundle size, as shown by the npm badges indicating 0 dependencies and a small bundle footprint, reducing bloat in Vue projects.
Dynamically calculates transition duration via the --vc-auto-duration CSS variable based on element height, ensuring smooth animations without manual tuning for different content sizes.
Respects user prefers-reduced-motion settings by disabling transitions automatically and provides patterns for adding ARIA attributes, making it easy to implement accessible collapsible sections.
Supports custom durations, easings, and multi-property transitions through CSS classes and data-collapse attribute states, as demonstrated in the README examples for advanced use cases.
Cons
Requires developers to write all CSS for transitions and styling from scratch, which can be time-consuming for teams looking for quick, out-of-the-box solutions.
Primarily focused on height transitions; for animations involving other properties like opacity or transforms, additional CSS work is needed, and it might not handle complex animation scenarios seamlessly.
Designed exclusively for Vue, so it's not portable to other frameworks, which could be a limitation in multi-framework environments or for developers switching stacks.
Frequently Asked Questions
Related Projects
tiptapThe headless rich text editor framework for web artisans.
vee-validate✅ Painless Vue forms
form-create:fire::fire::fire: 强大的低代码动态表单组件，通过 JSON 数据驱动表单渲染，适配移动端，支持可视化设计。提高开发者对表单的开发效率。目前在政务系统、OA系统、ERP系统、电商系统、流程管理等系统中已稳定应用。
vuelidateSimple, lightweight model-based validation for Vue.js
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.