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.
Be First to Comment