add entrance transition

src/components/CustomerList.vue

@@ -1,35 +1,36 @@
 <template>
 	<div class="customer-list">
 		<t-cell-group v-if="customerList.length">
-			<t-cell
-				v-for="(item, index) in customerList"
-				:key="item.id || item.code || index"
-				:note="item.code || ''"
-				hover
-				@click="handleSelect(item)"
-			>
-				<template #title>
-					<div class="cell-title">
-						<span v-text="item.name || item.code || '未命名客户'" />
-						<gender-icon :value="item.gender" />
-					</div>
-				</template>
-				<template #description>
-					<telephone-link :value="item.telephone" placeholder="未填写电话" />
-				</template>
-				<template #leftIcon>
-					<div class="left-icon">
+				<t-cell
+					v-entrance-transition="index * 30"
+					v-for="(item, index) in customerList"
+					:key="item.id || item.code || index"
+					:note="item.code || ''"
+					hover
+					@click="handleSelect(item)"
+				>
+					<template #title>
+						<div class="cell-title">
+							<span v-text="item.name || item.code || '未命名客户'" />
+							<gender-icon :value="item.gender" />
+						</div>
+					</template>
+					<template #description>
+						<telephone-link :value="item.telephone" placeholder="未填写电话" />
+					</template>
+					<template #leftIcon>
+						<div class="left-icon">
 						<span v-if="selectable" class="check" :class="{selected: isSelected(item)}">
 							<t-icon v-if="isSelected(item)" name="check" />
 						</span>
-						<t-image v-if="getCustomerPhotoURL(item, 64)" :src="getCustomerPhotoURL(item, 64)" :alt="item.name" fit="cover" class="avatar" />
-						<div v-else class="avatar fallback" v-text="(item.name || item.code || '客').slice(0, 1)" />
-					</div>
-				</template>
-				<template v-if="removable" #rightIcon>
-					<t-button theme="danger" size="extra-small" @click.stop="handleRemove(item)">移除</t-button>
-				</template>
-			</t-cell>
+							<t-image v-if="getCustomerPhotoURL(item, 64)" :src="getCustomerPhotoURL(item, 64)" :alt="item.name" fit="cover" class="avatar" />
+							<div v-else class="avatar fallback" v-text="(item.name || item.code || '客').slice(0, 1)" />
+						</div>
+					</template>
+					<template v-if="removable" #rightIcon>
+						<t-button theme="danger" size="extra-small" @click.stop="handleRemove(item)">移除</t-button>
+					</template>
+				</t-cell>
 		</t-cell-group>
 		<div v-else class="empty-block" v-text="emptyText" />
 	</div>