Tweens between heights of default slotted element.
Demo: https://bkwld.github.io/vue-height-tween-transition/
// Add component
import 'vue-height-tween-transition/index.css'
Vue.component('height-tween', require('vue-height-tween-transition'))
<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>
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.fade-leave-active {
position: absolute;
width: 100%;
}
</style>
<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>
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>
<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>
height-tweening
CSS class.in-out
mode transitions … though not sure why someone would use those…mode
Author: BKWLD
The Demo/Documentation: View The Demo/Documentation
Download Link: Download The Source Code
Official Website: https://github.com/BKWLD/vue-height-tween-transition
License: MIT
#vue #javascript #web-development