Press "Enter" to skip to content

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 fixed width or height and “auto”!

expandcollapse transition css, expand collapse animation codepen, expand transition css, css transition expand height, css expandcollapse div example

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>

Custom Collapse/Expand Transitions, Vue Collapse Transition Plugin/Github, expand collapse icon animation css


See Demo And Download

Official Website(ivanvermeyen): Click Here

This superior jQuery/javascript plugin is developed by ivanvermeyen. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.