Vue Custom Transition To Collapse Elements Horizontally Vertically

Vue Collapse Transition is a custom transition component that wraps the embedded transition. Collapses elements horizontally or vertically. Works with a fixed width or height and “auto”!

Must Read: A Lightweight Responsive Collapse Overflowing Table Columns Library | Podtablejs

Table of Contents

How to make use of it:

Install and download:

# NPM
$ npm install @ivanv/vue-collapse-transition --save

1. Install and import the Vue Collapse Transition component.

import CollapseTransition from 'CollapseTransition'

2. Create a CollapseTransition component in your template.

<collapse-transition>
  <ul v-show="isOpen">
  <li>Example!</li>
  <li>Example!</li>
  <li>Example!</li>
  <li>Example!</li>
  <li>Example!</li>
  <li>Example!</li>
  </ul>
</collapse-transition>

3. Enable the component.

export default {
  data() {
    return {
      isOpen = false, // closed by default
    }
  }
}

4. This component also supports horizontal collapse.

<collapse-transition dimension="width">
  <ul v-show="isOpen">
  <li>Example!</li>
  <li>Example!</li>
  <li>Example!</li>
  <li>Example!</li>
  <li>Example!</li>
  <li>Example!</li>
  </ul>
</collapse-transition>

5. Configure the duration of the animation.

<collapse-transition :duration="300">
  <ul v-show="isOpen">
  <li>Example!</li>
  <li>Example!</li>
  <li>Example!</li>
  <li>Example!</li>
  <li>Example!</li>
  <li>Example!</li>
  </ul>
</collapse-transition>

6. Apply the softening function to the transition.

<collapse-transition easing="ease-in-out">
  <ul v-show="isOpen">
  <li>Example!</li>
  <li>Example!</li>
  <li>Example!</li>
  <li>Example!</li>
  <li>Example!</li>
  <li>Example!</li>
  </ul>
</collapse-transition>

Options

☑️ Collapse Vertically or Horizontally

Set the dimension attribute to height or width.

☑️ Class Names

Vue will also set the usual transition classes. By default, the transition name is collapse, so the classes would be like collapse-enter and collapse-leave-to. You can choose another name if you wish.