Stagger

TransitionGroup wrapper for staggered enter and leave animations. It applies index-based delays to each rendered child.

<script>
import { ref } from 'vue'

const items = ref([
  { id: 'a', text: 'Alpha' },
  { id: 'b', text: 'Beta' },
  { id: 'c', text: 'Gamma' },
  { id: 'd', text: 'Delta' },
])

function add() {
  items.value.unshift({ id: `${Date.now()}`, text: `New ${items.value.length + 1}` })
}

function remove() {
  items.value.shift()
}
</script>

Basic Usage

Stagger

Interactive preview paused.

API

Props

Prop	Type	Default	Description
`tag`	`string`	`'div'`	Root tag passed to `TransitionGroup`.
`appear`	`boolean`	`true`	Enables the initial appear transition.
`name`	`string`	`'tx-stagger'`	TransitionGroup class name prefix.
`duration`	`number`	`180`	Enter and leave transition duration in milliseconds.
`delayStep`	`number`	`24`	Extra delay added per rendered child index, in milliseconds.
`delayBase`	`number`	`0`	Base delay applied before the per-child delay, in milliseconds.
`easing`	`'ease'\| 'ease-in'\| 'ease-out'\| 'ease-in-out'\| 'linear'`	`'ease-out'`	CSS timing function used for opacity and transform transitions.