Wondering what’s next for npm?Check out our public roadmap! »

    @fuzzco/flex-height

    1.0.3 • Public • Published

    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

    Prop Type Default Notes
    wrapper String div Wrapper element for the entire flex-height component.

    Structure goes: <wrapper> -> <div.internal> -> <transition> -> <slot>, where div.internal is the component that is actually sized.
    leaveTime Number 200 ms to fade out when transitioning.
    appear Boolean false Whether or not the animation should run on mount.

    Keywords

    none

    Install

    npm i @fuzzco/flex-height

    DownloadsWeekly Downloads

    20

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    1.55 MB

    Total Files

    20

    Last publish

    Collaborators

    • avatar
    • avatar