Vue Transition Expand

This is a Vue 3 plugin to transition element to height: auto; based on Markus Oberlehner article.

👉 Demo on StackBlitz

Installation

npm install vue3-transition-expand
# or
yarn add vue3-transition-expand

Import

Global import

import TransitionExpand from 'vue3-transition-expand'

Vue.use(TransitionExpand, {
    // optional global options (see below)
})

Local import

import { TransitionExpand } from 'vue3-transition-expand';

export default {
    components: {
        TransitionExpand,
    },
    data () {
        return {
            expanded: false,
        };
    },
}

Nuxt plugin

import TransitionExpand from 'vue3-transition-expand';
import 'vue3-transition-expand/dist/style.css';

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(TransitionExpand, {
        // optional global options (see below)
    })
});

Configuration

Global Options

interface PluginOptions {
    componentName?: string; // default: 'TransitionExpand'
    duration?: number; // default: 300
    hwAcceleration?: boolean // default: false
}

Component Props

export interface Props {
    expanded: boolean; // default: false
    duration?: number; // default: 300
    hwAcceleration?: boolean; // default: false
}

Example

<TransitionExpand :expanded="expanded">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</TransitionExpand>
<button @click="expanded = !expanded">{{ !expanded ? 'Expand' : 'Collapse' }}</button>