add entrance transition

src/pages/event/EventList.vue

@@ -10,45 +10,46 @@
 			@scrolltolower="fetch"
 		>
 			<t-cell-group theme="card">
-				<t-cell
-					class="item"
-					v-for="item in visibleEventList"
-					:key="item.id"
-					:arrow="!!item.id"
-					:hover="!!item.id"
-					@click="toEventItem(item)"
-				>
-					<template #title>
-						<div class="header">
-							<div class="color" :style="{ background: item.color || defaultColor }" />
-							<div class="title" v-text="item.name || '未命名事件'" />
-							<t-tag
-								class="status"
-								:theme="getStatusTag(item).theme"
-								variant="outline"
-								:content="getStatusTag(item).text"
-							/>
-							<t-tag v-if="item.requirePhoto" theme="warning" variant="outline">需拍照</t-tag>
-						</div>
-					</template>
-					<template #description>
-						<div class="description">
-							<div class="line">
-								<span>可登记角色</span>
+					<t-cell
+						v-entrance-transition="index * 30"
+						v-for="(item, index) in visibleEventList"
+						:key="item.id"
+						class="item"
+						:arrow="!!item.id"
+						:hover="!!item.id"
+						@click="toEventItem(item)"
+					>
+						<template #title>
+							<div class="header">
+								<div class="color" :style="{ background: item.color || defaultColor }" />
+								<div class="title" v-text="item.name || '未命名事件'" />
 								<t-tag
-									v-for="roleCode in item.roleCodeList"
-									:key="roleCode"
-									theme="primary"
-									variant="light-outline"
-									:content="getRoleName(roleCode)"
+									class="status"
+									:theme="getStatusTag(item).theme"
+									variant="outline"
+									:content="getStatusTag(item).text"
 								/>
-								<span v-if="!(item.roleCodeList || []).length" class="muted" v-text="'未配置'" />
+								<t-tag v-if="item.requirePhoto" theme="warning" variant="outline">需拍照</t-tag>
 							</div>
-							<div class="line" v-text="getLimitText(item)" />
-							<div class="line" v-text="getValueDefinitionText(item)" />
-						</div>
-					</template>
-				</t-cell>
+						</template>
+						<template #description>
+							<div class="description">
+								<div class="line">
+									<span>可登记角色</span>
+									<t-tag
+										v-for="roleCode in item.roleCodeList"
+										:key="roleCode"
+										theme="primary"
+										variant="light-outline"
+										:content="getRoleName(roleCode)"
+									/>
+									<span v-if="!(item.roleCodeList || []).length" class="muted" v-text="'未配置'" />
+								</div>
+								<div class="line" v-text="getLimitText(item)" />
+								<div class="line" v-text="getValueDefinitionText(item)" />
+							</div>
+						</template>
+					</t-cell>
 			</t-cell-group>
 			<div v-if="!visibleEventList.length" class="empty-block" v-text="emptyText" />
 			<div v-if="visibleEventList.length" class="load-state" v-text="isNoMore ? '已经到底了' : '上拉加载更多'" />