Stagger

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

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() }

Basic Usage

Stagger

Demo will load when visible.

<template>
  <TxStagger tag="div" :delay-step="30" :duration="180">
    <div v-for="item in items" :key="item.id">{{ item.text }}</div>
  </TxStagger>
</template>

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.