Custom Vue transition to collapse elements horizontally or vertically

Vue Collapse Transition

This custom VueJS transition component wraps the built-in transition. It collapses elements horizontally or vertically. Works with both fixed and ‘auto’ width or height!

👁 Demo

You can find a quick demo to play with on CodePen.

📦 Install

Using NPM:

npm i @ivanv/vue-collapse-transition

Via CDN:

<script src=""></script>

🛠 Usage

Wrap the container you wish to make collapsable with the <collapse-transition> tag.

When you toggle the v-show boolean value, the transition will automatically trigger.

    <button @click="isOpen = !isOpen">

      <div v-show="isOpen">
        This div will open and close smoothly!

  import { CollapseTransition } from "@ivanv/vue-collapse-transition"

  export default {
    components: {
    data() {
      return {
        isOpen: false, // closed by default

It’s up to you how you want to position the collapsable element with CSS.

⚙️ Options

☑️ Collapse Vertically or Horizontally

Set the dimension attribute to height or width.

Default: height

<collapse-transition dimension="height">
  <!-- ... -->

If you collapse the width of a container, the content of its children might wrap on new lines. To remedy this, you can either add a fixed height to the children or use the CSS rule white-space: nowrap.

☑️ 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.

<collapse-transition name="slide">
  <!-- ... -->

☑️ Transition Duration

How long should the transition take in milliseconds.

Default: 300

<collapse-transition :duration="300">
  <!-- ... -->

☑️ Transition Easing

The CSS transition-timing-function (easing) to use.

Default: ease-in-out

<collapse-transition easing="ease-in-out">
  <!-- ... -->

☕️ Credits

🔓 Security

If you discover any security related issues, please e-mail me instead of using the issue tracker.

📑 Changelog

See a list of important changes in the changelog.

Download Details:

Author: ivanvermeyen


Source Code:

#vuejs #vue #javascript

Custom Vue transition to collapse elements horizontally or vertically
34.95 GEEK