https://github.com/bkwld/vue-height-tween-transition
Tween the height of the parent of transitioning items for use in accordions or carousels.
https://github.com/bkwld/vue-height-tween-transition
transition vuejs
Last synced: 9 months ago
JSON representation
Tween the height of the parent of transitioning items for use in accordions or carousels.
- Host: GitHub
- URL: https://github.com/bkwld/vue-height-tween-transition
- Owner: BKWLD
- License: mit
- Created: 2017-09-06T16:42:36.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2024-11-18T17:53:37.000Z (over 1 year ago)
- Last Synced: 2025-03-30T11:02:01.155Z (over 1 year ago)
- Topics: transition, vuejs
- Language: JavaScript
- Homepage: https://bkwld.github.io/vue-height-tween-transition/
- Size: 1.47 MB
- Stars: 16
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue Height Tween Transition
Tweens between heights of default slotted element.
Demo: https://bkwld.github.io/vue-height-tween-transition/
## Usage
```javascript
// Add component
import 'vue-height-tween-transition/index.css'
Vue.component('height-tween', require('vue-height-tween-transition'))
```
#### Switching mode - Simultaneous
```vue
export default {
data: function () { return {
quotes: [{ id: 1, quote: 'Text' }, { id: 2, quote: 'Another'}],
active: 0,
}},
computed: {
quote: function () { return this.quotes[this.active] }
},
methods: {
next: function() { this.active++ }
},
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.fade-leave-active {
position: absolute;
width: 100%;
}
```
#### Switching mode - Out-In
```vue
export default {
data: function () { return {
quotes: [{ id: 1, quote: 'Text' }, { id: 2, quote: 'Another'}],
active: 0,
}},
computed: {
quote: function () { return this.quotes[this.active] }
},
methods: {
next: function() { this.active++ }
},
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
```
#### Toggle (Accordion) mode
```vue
export default {
data: function () { return {
quote: { id: 1, quote: 'Text' },
}},
}
```
## Notes
- To customize the height transition duration or other properties, define your own `height-tweening` CSS class.
- Doesn't work with `in-out` mode transitions ... though not sure why someone would use those...
- Expects a toggling transition to not use `mode`