!npm !dependencies !npm bundle size !downloads !GitHub Workflow Status

Vue Collapsed

Dynamic CSS height transition from _any value to auto_ and vice versa. Accordion-ready.

Examples and Demo - Stackblitz

Installation

``shell
npm i vue-collapsed
`

Usage

`vue



`

Props

| 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: |

Emits

| 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 |

Automatic transition (default)

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.

Custom transition

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;
}
`

`vue



{{ 'Collapsed '.repeat(100) }}



`

$3

To transition other properties, use the data-collapse attribute:

| Transition | From | Enter | Leave |
| ---------- | ----------- | ------------ | ----------- |
| Expand | collapsed | expanding | expanded |
| Collapse | expanded | 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 }}

`

Example - Accordion

`vue



`

Accessibility

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



`

Manually disabling transitions

`vue



``

License

MIT