@fuzzco/flex-height v1.0.3

Flexible height transition for Vue. Demo

npm i @fuzzco/flex-height

Register component in Vue, then:

<template>
    <main>
        <flex-height>
            <!-- Any component with varying height can go here. -->
            <!-- flex-height will wrap that component and adjust its height accordingly.-->
            <!-- Make sure you key the contents so the change registers! -->
            <img
                :src="imageSizes[imageSizes.length % currentIndex]"
                :key="currentIndex"
            />
        </flex-height>

        <button @click="currentIndex++">Next Image</button>
    </main>
</template>

<script>
    export default {
        data() {
            return {
                currentIndex: 0,
                imageSizes: ['300x300', '300x400', '300x500']
            }
        }
    }
</script>

Options