Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ivanvermeyen/vue-collapse-transition
Custom Vue transition to collapse elements horizontally or vertically. Works with both fixed and 'auto' width or height.
https://github.com/ivanvermeyen/vue-collapse-transition
collapse transition vue vuejs vuejs2
Last synced: 5 days ago
JSON representation
Custom Vue transition to collapse elements horizontally or vertically. Works with both fixed and 'auto' width or height.
- Host: GitHub
- URL: https://github.com/ivanvermeyen/vue-collapse-transition
- Owner: ivanvermeyen
- License: mit
- Created: 2019-03-21T18:30:46.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2021-04-09T10:35:59.000Z (almost 4 years ago)
- Last Synced: 2024-12-31T11:24:46.013Z (12 days ago)
- Topics: collapse, transition, vue, vuejs, vuejs2
- Language: Vue
- Size: 33.2 KB
- Stars: 104
- Watchers: 2
- Forks: 25
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
# Vue Collapse Transition
[](https://vuejs.org/)
[](https://npmjs.com/package/@ivanv/vue-collapse-transition)
[](https://npmjs.com/package/@ivanv/vue-collapse-transition)
[](https://choosealicense.com/licenses/mit/)
#### This custom [VueJS]([https://vuejs.org](https://vuejs.org/)) 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](https://codepen.io/ivanvermeyen/pen/LaXJKa).
## 📦 Install
Using NPM:
```bash
npm i @ivanv/vue-collapse-transition
```
Via CDN:
```html
```
## 🛠 Usage
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
Toggle
This div will open and close smoothly!
import { CollapseTransition } from "@ivanv/vue-collapse-transition"
export default {
components: {
CollapseTransition,
},
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`
```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
```
## ☕️ Credits
- [Ivan Vermeyen](https://byterider.io)
- [All contributors](../../contributors)
## 🔓 Security
If you discover any security related issues, please [e-mail me](mailto:[email protected]) instead of using the issue tracker.
## 📑 Changelog
See a list of important changes in the [changelog](CHANGELOG.md).
## 📜 License
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.