Stagger

/enter/leave

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 loads on client.

API

Props

Prop	Type	Default	Description
`tag`	`string`	`'div'`	Description for tag.
`appear`	`boolean`	`true`	Description for appear.
`name`	`string`	`'tx-stagger'`	TransitionGroup name
`duration`	`number`	`180`	Description for duration.
`delayStep`	`number`	`24`	Description for delayStep.
`delayBase`	`number`	`0`	Description for delayBase.
`easing`	`'ease'\| 'ease-in'\| 'ease-out'\| 'ease-in-out'\| 'linear'`	`'ease-out'`	Description for easing.