Smooth Content Expand/Collapse Transitions – Vue Collapsed

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

• Removed vue from peerDeps to avoid unnecessary warnings when install the package.

v1.1.1 (01/07/2023)

• Reduced the bundle size by 10%.

v1.1.0 (12/16/2022)

• onCollapse, onExpandcallbacks
• Transition state on data-collapse attribute and { state } slot.
• baseHeight prop

v1.0.2 (11/28/2022)

• border: 0 none and margin: 0properties are now enforced on the Collapse root element along with padding: 0.
• Internal composable.

Download Details:

Author: smastrom

Live Demo: https://vue-collapsed.netlify.app/

Download Link: https://github.com/smastrom/vue-collapsed/archive/refs/heads/main.zip

Official Website: https://github.com/smastrom/vue-collapsed

Install & Download:

# Yarn
$ yarn add vue-collapsed

# NPM
$ npm i vue-collapsed