Tween Height of The Parent of Transitioning Items in Vue.js

vue-height-tween-transition-library

Vue Height Tween Transition is animation component tweens of virtual slotted element heights.

vue smooth height, vue transition height, vue expand transition, transition expand collapse vue, vue transition height slide down, css transition height not working

Notes

  • To customize the height transition duration or other properties, select the Height Balance, CSS class.
  • Doesn’t work with Inner and Outer mode transitions…although not sure why someone would use those…
  • Toggle transmission is expected to not use the mode

How to make use of it:

Install & Download (Usage):

// Add component
import 'vue-height-tween-transition/index.css'
Vue.component('height-tween', require('vue-height-tween-transition'))

Switching mode – Simultaneous

<template>
  <div class='quotes'>
   <height-tween switching name='fade'>
      <quote :key='quote.id' :quote='quote'></quote>
   </height-tween>
  </div>
</template>
<script>
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++ }
  },
}
</script>

Switching mode – Out-In

<template>
  <div class='quotes'>
   <height-tween switching name='fade' mode='out-in'>
      <quote :key='quote.id' :quote='quote'></quote>
   </height-tween>
  </div>
</template>
<script>
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++ }
  },
}
</script>

Toggle (Accordion) mode

<template>
  <div class='quotes'>
   <height-tween :duration='300'>
      <quote :v-if='quote' :quote='quote'></quote>
   </height-tween>
  </div>
</template>
<script>
export default {
  data: function () { return {
    quote: { id: 1, quote: 'Text' },
  }},
}
</script>

Vue Height Tween Transition Plugin/Github, vue 3 collapse transition


See Demo And Download


Official Website(BKWLD): Click Here

This superior jQuery/javascript plugin is developed by BKWLD. For extra Advanced Usages, please go to the official website.