Vue Height Tween Transition
Tweens between heights of default slotted element.
Demo: https://bkwld.github.io/vue-height-tween-transition/
Usage
// 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.
Notes
- Uses
classListso requires IE >= 10 - To customize the height transition duration or other properties, define your own
height-tweeningCSS class.
