Tweens between heights of default slotted element.
// Add component
import 'vue-height-tween-transition/index.css'
Vue.component('height-tween', require('vue-height-tween-transition'))
<template>
<div class='quotes'>
<height-tween name='fade' mode='out-in'>
<quote :key='quote.id' :quote='quote'></quote>
</height-tween>
</div>
</template>
<script>
export default {
data: function () {
quotes: [{ id: 1, quote: 'Text' }, { id: 2, quote: 'Another'}],
active: 0,
},
computed: {
quote: function () { return this.quotes[this.active] }
},
methods: {
next: function() { this.active++ }
},
}
</script>
Works with v-if
transitions as well as :key
based transitions.
classList
so requires IE >= 10height-tweening
CSS class.Author: BKWLD
Live Demo: https://bkwld.github.io/vue-height-tween-transition/
GitHub: https://github.com/BKWLD/vue-height-tween-transition
#vuejs #javascript #vue #vue-js