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:
npm i @ivanv/vue-collapse-transitionVia CDN:
<script src="https://unpkg.com/@ivanv/vue-collapse-transition"></script>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.
<template>
<div>
<button @click="isOpen = !isOpen">
Toggle
</button>
<collapse-transition>
<div v-show="isOpen">
This div will open and close smoothly!
</div>
</collapse-transition>
</div>
</template>
<script>
export default {
data() {
return {
isOpen: false, // closed by default
}
}
}
</script>It's up to you how you want to position the collapsable element with CSS.
Set the dimension attribute to height or width.
Default: height
<collapse-transition dimension="height">
<!-- ... -->
</collapse-transition>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.
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">
<!-- ... -->
</collapse-transition>How long should the transition take in milliseconds.
Default: 300
<collapse-transition :duration="300">
<!-- ... -->
</collapse-transition>The CSS transition-timing-function (easing) to use.
Default: ease-in-out
<collapse-transition easing="ease-in-out">
<!-- ... -->
</collapse-transition>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.