add entrance transition

src/pages/event/EventRecordList.vue

@@ -33,64 +33,65 @@
 			@scrolltolower="loadRecords"
 		>
 			<div class="list-wrapper">
-				<t-cell-group class="summary" theme="card">
-					<t-cell
-						title="开始时间"
-						:note="dateRange[0] || '-'"
-						arrow
-						@click="startVisible = true"
-					/>
-					<t-cell
-						title="结束时间"
-						:note="dateRange[1] || '-'"
-						arrow
-						@click="endVisible = true"
-					/>
-					<t-cell title="事件" :note="eventFilterLabel" />
-					<t-cell title="数据量" :note="summaryTotalText" />
-					<t-cell v-if="summaryNumberValueText" title="数值合计" :note="summaryNumberValueText" />
-				</t-cell-group>
+					<t-cell-group v-entrance-transition class="summary" theme="card">
+						<t-cell
+							title="开始时间"
+							:note="dateRange[0] || '-'"
+							arrow
+							@click="startVisible = true"
+						/>
+						<t-cell
+							title="结束时间"
+							:note="dateRange[1] || '-'"
+							arrow
+							@click="endVisible = true"
+						/>
+						<t-cell title="事件" :note="eventFilterLabel" />
+						<t-cell title="数据量" :note="summaryTotalText" />
+						<t-cell v-if="summaryNumberValueText" title="数值合计" :note="summaryNumberValueText" />
+					</t-cell-group>
 				<t-cell-group
 					v-if="pageResult.list.length"
 					class="record-list"
 					theme="card"
 				>
-					<t-swipe-cell
-						v-for="item in pageResult.list"
-						:key="item.id"
-						class="item"
-					>
-						<t-cell
-							class="cell"
-							:title="getRecordEventName(item)"
-							:description="getRecordCustomerName(item)"
-							:note="getRecordRegisteredAt(item)"
-							arrow
-							hover
-							@click="toDetail(item.id || '')"
+						<t-swipe-cell
+							v-entrance-transition="index * 30"
+							v-for="(item, index) in pageResult.list"
+							:key="item.id"
+							class="item"
 						>
-							<template #leftIcon>
-								<t-image
-									v-if="getRecordPhotoURL(item)"
-									:src="getRecordPhotoURL(item)"
-									:alt="getRecordEventName(item)"
-									fit="cover"
-									class="avatar"
-								/>
-								<div v-else class="avatar fallback" v-text="getRecordCustomerInitial(item)" />
-							</template>
-						</t-cell>
-						<template v-if="canDeleteRecord" #right>
-							<t-button
-								class="delete"
-								theme="danger"
-								:loading="isDeleting && deletingId === item.id"
-								@click.stop="confirmRemoveRecord(item)"
+							<t-cell
+								class="cell"
+								:title="getRecordEventName(item)"
+								:description="getRecordCustomerName(item)"
+								:note="getRecordRegisteredAt(item)"
+								arrow
+								hover
+								@click="toDetail(item.id || '')"
 							>
-								删除
-							</t-button>
-						</template>
-					</t-swipe-cell>
+								<template #leftIcon>
+									<t-image
+										v-if="getRecordPhotoURL(item)"
+										:src="getRecordPhotoURL(item)"
+										:alt="getRecordEventName(item)"
+										fit="cover"
+										class="avatar"
+									/>
+									<div v-else class="avatar fallback" v-text="getRecordCustomerInitial(item)" />
+								</template>
+							</t-cell>
+							<template v-if="canDeleteRecord" #right>
+								<t-button
+									class="delete"
+									theme="danger"
+									:loading="isDeleting && deletingId === item.id"
+									@click.stop="confirmRemoveRecord(item)"
+								>
+									删除
+								</t-button>
+							</template>
+						</t-swipe-cell>
 				</t-cell-group>
 				<div v-else class="load-state" v-text="isLoading ? '正在加载登记事件记录' : '暂无登记事件记录'" />
 				<div v-if="pageResult.list.length" class="load-state" v-text="loadStateText" />