Custom Vue transition to collapse elements horizontally or vertically. Works with both fixed and 'auto' width or height.
npm install @ivanv/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!
You can find a quick demo to play with on CodePen.
Using NPM:
``bash`
npm i @ivanv/vue-collapse-transition
Via CDN:
`html`
Wrap the container you wish to make collapsable with the tag.
When you toggle the v-show boolean value, the transition will automatically trigger.
`vue
This div will open and close smoothly!
`
It's up to you how you want to position the collapsable element with CSS.
#### ☑️ Collapse Vertically or Horizontally
Set the dimension attribute to height or width.
Default: height
`vue`
> 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.
`vue`
#### ☑️ Transition Duration
How long should the transition take in milliseconds.
Default: 300
`vue`
#### ☑️ Transition Easing
The CSS transition-timing-function (easing) to use.
Default: ease-in-out
`vue``
- Ivan Vermeyen
- All contributors
If you discover any security related issues, please e-mail me instead of using the issue tracker.
See a list of important changes in the changelog.
The MIT License (MIT). Please see License File for more information.