Home
Animation
Custom Collapse/Expand Transitions – Vue Collapse Transition

Custom Collapse/Expand Transitions – Vue Collapse Transition

ivanvermeyen Last Updated: 1 year ago

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:

Custom Collapse Expand Transitions - Vue Collapse Transition

Changelog:

v1.0.2 (04/10/2021)

  • Actually build the last fix

v1.0.1 (04/08/2021)

  • Fix global window is not defined problem with Nuxt

v1.0.0 (02/09/2021)

  • Clear cached dimensions after transitions
  • Emit transition events

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

Related Posts

Add Comment