Description:
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:
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