add entrance transition

src/components/CardContainer.vue

@@ -45,9 +45,13 @@ defineOptions({
 </script>
 
 <style scoped lang="less">
-	.card-container {
+.card-container {
 	margin: 0 1rem;
 
+	:deep(.t-cell-group--card) {
+		margin: 0;
+	}
+
 	.card-title {
 
 		.title {

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>

src/components/EventSelector.vue

@@ -1,9 +1,9 @@
 <template>
-	<div class="registration-event-selector">
+	<div class="event-selector">
 		<p v-if="props.label" class="t-form__label" :class="{required: props.requiredMark}" v-text="props.label" />
 		<div v-if="props.eventList.length" class="group" role="group">
 			<button
-				v-for="item in props.eventList"
+				v-for="(item, index) in props.eventList"
 				:key="item.id || item.name"
 				type="button"
 				class="item bg-white"
@@ -11,6 +11,7 @@
 				:title="item.name"
 				:disabled="props.disabled || !item.id"
 				:aria-pressed="isSelected(item.id)"
+				v-entrance-transition="index * 30"
 				@click="toggleEvent(item.id)"
 			>
 				<span
@@ -62,7 +63,7 @@ const toggleEvent = (eventId?: string) => {
 </script>
 
 <style scoped lang="less">
-.registration-event-selector {
+.event-selector {
 	width: 100%;
 	display: grid;
 	gap: .5rem;
@@ -145,7 +146,7 @@ const toggleEvent = (eventId?: string) => {
 }
 
 :global(html.theme-dark) {
-	.registration-event-selector {
+	.event-selector {
 		.t-form__label {
 			color: #94a3b8;
 		}

src/components/PhotoScroller.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="photo-section">
+	<div class="photo-scroller">
 		<div class="t-form__label" v-text="title" />
 		<div class="photo-shell" :class="{ 'without-add': !showAdd }">
 			<div class="items">
@@ -189,7 +189,7 @@ function openPhotoViewer(index: number): void {
 </script>
 
 <style scoped lang="less">
-.photo-section {
+.photo-scroller {
 	gap: .375rem;
 	width: 100%;
 	display: grid;
@@ -314,7 +314,7 @@ function openPhotoViewer(index: number): void {
 }
 
 :global(html.theme-dark) {
-	.photo-section {
+	.photo-scroller {
 		.field-title,
 		.photo-empty {
 			color: #94a3b8;

src/components/TagSelector.vue

@@ -35,12 +35,13 @@
 			</div>
 			<div class="list">
 				<t-tag
-					v-for="item in visibleTagList"
+					v-for="(item, index) in visibleTagList"
 					:key="item.id"
 					class="item"
 					:theme="isSelected(item) ? 'primary' : 'default'"
 					size="large"
 					:variant="isSelected(item) ? 'dark' : 'light-outline'"
+					v-entrance-transition="index * 10"
 					@click="toggleTag(item)"
 				>
 					<span v-text="getTagName(item)" />