Dynamic CSS height transition from any value to auto and vice versa for Vue 3. Accordion ready.
npm install vue-collapsed!npm !dependencies !npm bundle size !downloads !GitHub Workflow Status
Dynamic CSS height transition from _any value to auto_ and vice versa. Accordion-ready.
Examples and Demo - Stackblitz
``shell`
npm i vue-collapsed
`vue
{{ 'Collapsed '.repeat(100) }}
`
| Name | Type | Description | Required |
| ------------ | ----------------------------- | ---------------------------------------- | ------------------ |
| when | boolean | Controls the collapse/expand state | :white_check_mark: |baseHeight
| | number | Collapsed height in px. Defaults to 0. | :x: |as
| | _keyof_ HTMLElementTagNameMap | Tag to use instead of div | :x: |
| Name | Type | Description |
| ------------ | ---------- | -------------------------------- |
| @expand | () => void | Emitted when expansion starts |@expanded
| | () => void | Emitted when expansion completes |@collapse
| | () => void | Emitted when collapse starts |@collapsed
| | () => void | Emitted when collapse completes |
By default, the following transition is always added to the Collapse element:
`css`
transition: height var(--vc-auto-duration) cubic-bezier(0.33, 1, 0.68, 1);
--vc-auto-duration is calculated dynamically and corresponds to the optimal transition duration based on the element's height.
To use a custom duration or easing, add a class to the Collapse component that transitions the height property:
`css`
.collapsed-area {
transition: height 300ms ease-out;
}
` {{ 'Collapsed '.repeat(100) }}vue`
To transition other properties, use the data-collapse attribute:
| Transition | From | Enter | Leave |
| ---------- | ----------- | ------------ | ----------- |
| Expand | collapsed | expanding | expanded |expanded
| Collapse | | collapsing | collapsed |
`css
.collapsed-area {
--transition-base: 300ms cubic-bezier(0.33, 1, 0.68, 1);
transition:
height var(--transition-base),
opacity var(--transition-base);
}
.collapsed-area[data-collapse='expanded'],
.collapsed-area[data-collapse='expanding'] {
opacity: 1;
}
.collapsed-area[data-collapse='collapsed'],
.collapsed-area[data-collapse='collapsing'] {
opacity: 0;
}
`
Alternatively, to use different easings or durations for expanding and collapsing:
`css
.collapsed-area[data-collapse='expanding'] {
transition: height 600ms ease-in-out;
}
.collapsed-area[data-collapse='collapsing'] {
transition: height 300ms ease-out;
}
`
The values of the data-collapse attribute can be accessed using v-slot:
`vue`
{{ state === 'collapsing' ? 'Collapsing...' : null }}
`vue
{{ q.answer }}
`
vue-collapsed automatically detects if users prefer reduced motion and disables transitions accordingly, while maintaining the same API behavior (emitting events and applying post-transition styles).
You should add aria attributes to the Collapse element based on your specific use case.
`vue
{{ 'Collapsed '.repeat(100) }}
`
` {{ 'Collapsed '.repeat(100) }}vue
``
MIT