Custom Collapse/Expand Transitions – Vue Collapse Transition

Description:

A custom collapse transition component to smoothly expand and collapse elements with auto height & auto width support.

How to use it:

1. Install and import the Vue Collapse Transition component.

import CollapseTransition from 'CollapseTransition'

2. Create the 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
    }
  }
}

3. The component also supports horizontal collapsing.

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

4. Config 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>

5. Apply an easing 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>

Preview:

Changelog:

09/29/2020

• Clear cached styles after transition

Download Details:

Author: ivanvermeyen

Live Demo: collapse-expand-transition

Download Link: https://github.com/ivanvermeyen/vue-collapse-transition/archive/master.zip

Official Website: https://github.com/ivanvermeyen/vue-collapse-transition

Install & Download:

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

You Might Be Interested In: