Smooth Content Expand/Collapse Transitions - Vue Collapsed

Install & Download:

# Yarn
$ yarn add vue-collapsed
# NPM
$ npm i vue-collapsed

Description:

A Vue 3 component to create smooth expand/collapse animations by using CSS3 transitions. Great for accordions.

How to use it:

1. Import and register the Vue Collapsed.

import { Collapse } from 'vue-collapsed'
createApp(App)
  .component('Collapse', Collapse)
  .mount('#app')

2. Add the Collapse component to the template.

<template>
  <Collapse :when="isOpen" class="my-class">
    <p>Content To Toggle</p>
  </Collapse>
</template>

3. Config the expand/collapse animations.

.my-class {
  transition: height 300ms cubic-bezier(0.3, 0, 0.6, 1);
}

4. Available component props.

when: {
  type: Boolean as PropType<boolean>,
  required: true,
},
/** Collapsed state height in px, defaults to `0`. */
baseHeight: {
  type: Number as PropType<number>,
  required: false,
  default: 0,
},
/** Element tag to use instead of `div`. */
as: {
  type: String as PropType<keyof HTMLElementTagNameMap>,
  required: false,
  default: 'div',
},
/** Callback on expand transition start. */
onExpand: callback,
/** Callback on expand transition completed. */
onExpanded: callback,
/** Callback on collapse transition start. */
onCollapse: callback,
/** Callback on collapse transition completed. */
onCollapsed: callback,

Preview:

Changelog:

v1.3.3 (04/09/2024)

Force expand/collapse if unable to query scrollHeight in some edge cases

v1.3.2 (04/08/2024)

Fix onTransitionEnd height comparison

v1.3.0 (12/15/2023)

Fix a SSR layout shift bug where <Collapse /> was displayed as expanded on initial render until JS was loaded (if collapsed).
Add a check to control whether requestAnimationFrame is available.

v1.2.9 (10/19/2023)

Update

v1.2.8 (09/16/2023)

Fixed a bug on iOS where getAutoDuration returned Infinity if visually hidden styles were applied just right before calling it.

v1.2.7 (08/20/2023)

Fixed a bug where auto duration was not calculated if Collapse was mounted in a container with display: none.

v1.2.6 (08/03/2023)

Collapse is now more performant, using only one requestAnimationFrame call per expand/collapse. This was achieved by streamlining the logic behind retrieving the auto duration value, which is now only captured on mount.
No longer enforcing margin: 0 and border: 0 on the Collapse element fixed styles.
When baseHeight dynamically updates to 0 on collapsed state, display: hidden is now added on the Collapse element styles.

v1.2.0 (07/25/2023)

Starting from v1.2.0 you don’t need to define a class name with a height transition anymore. As long as no transition is added to the Collapse element, the following one is automatically set on mount: height var(–vc-auto-duration) cubic-bezier(0.33, 1, 0.68, 1).
Added automatic transition disabling for prefers-reduced-motion: reduce and the ability to manually disable transitions via CS
Callback props have been replaced by emits.
Collapse has been refactored from a render function to a Vue component, delegating the transformation to the Vue compiler. This brings proper support for typed emits and slots.
Updated vite-plugin-dts configuration for better types generation

v1.1.2 (04/02/2023)