Vue Transition Expand
This is a Vue 3 component that can transition one or multiple elements to their auto size.
Initial inspiration was taken from an article by Markus Oberlehner.
Why this component
Although some similar components do exist, this one provides several unique benefits which are listed below:
- Can handle multiple child elements
- Works both vertically and horizontally
- Automatically handles margins and paddings on child elements
Contents
Installation
npm i @limonische/vue3-transition-expand
# or
yarn add @limonische/vue3-transition-expand
# or
pnpm add @limonische/vue3-transition-expand
Imports
Styles
For the component to work properly you need to import styles either globally or locally.
import '@limonische/vue3-transition-expand/dist/style.css'
As a local component
import { TransitionExpand } from '@limonische/vue3-transition-expand'
As a Vue plugin
import TransitionExpand from '@limonische/vue3-transition-expand'
Vue.use(TransitionExpand, {
// global options
})
As a Nuxt plugin
import TransitionExpand from '@limonische/vue3-transition-expand'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(TransitionExpand, {
// global options
})
})
Usage
Single child element
For a single child element the usage is the same as with default Transition
component from Vue.
import { ref } from 'vue'
import { TransitionExpand } from '@limonische/vue3-transition-expand'
const show = ref(false)
<TransitionExpand>
<div v-if="show">Lorem ipsum dolor sit amet.</div>
</TransitionExpand>
<button @click="show = !show">Toggle</button>
Multiple child elements
For the component to work with multiple child elements you need to provide it with tag
prop. As soon as the prop is provided the component starts to behave like the TransitionGroup
component from Vue and animates all of its children.
import { ref } from 'vue'
import { TransitionExpand } from '@limonische/vue3-transition-expand'
const items = ref([{ id: 1 }, { id: 2 }])
const addItem = (id) => items.value.push({ id })
<TransitionExpand tag="div">
<div v-for="item in items" :key="item.id">{{ item.id }}</div>
</TransitionExpand>
<button @click="addItem(3)">Add item</button>
Horizontal mode
To make this component work horizontally instead of vertically you need to provide it with direction
prop set to horizontal
<TransitionExpand direction="horizontal">
<div v-if="show">Lorem ipsum dolor sit amet.</div>
</TransitionExpand>
Options
Component props
export interface TransitionExpandProps {
tag?: keyof HTMLElementTagNameMap | null // default: null
direction?: 'vertical' | 'horizontal' // default: 'vertical'
duration?: number // default: 300
}
Global plugin options
export interface TransitionExpandPluginOptions {
componentName?: string // default: 'TransitionExpand'
duration?: number // default: 300
}
All of the interfaces are exported from the library for better extension capabilities.