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

基础用法

Stagger

示例即将加载...

<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

属性名	类型	默认值	说明
`tag`	`string`	`'div'`	容器 tag
`appear`	`boolean`	`true`	是否首屏也执行 enter
`name`	`string`	`'tx-stagger'`	TransitionGroup name
`duration`	`number`	`180`	动画时长（ms）
`delayStep`	`number`	`24`	相邻元素延迟（ms）
`delayBase`	`number`	`0`	基础延迟（ms）
`easing`	`'ease'\|'ease-in'\|'ease-out'\|'ease-in-out'\|'linear'`	`'ease-out'`	缓动