add entrance transition

src/pages/tabs/HomeTab.vue

@@ -1,15 +1,21 @@
 <template>
 	<div class="entry-page">
 		<section class="entry-list">
-			<div v-for="item in visibleEntryList" :key="item.path" class="item" @click="go(item.path)">
-				<div class="body">
-					<t-icon :name="item.icon" size="1.75rem" />
-					<h2 v-text="item.title" />
+			<div
+				v-entrance-transition="index * 70"
+				v-for="(item, index) in visibleEntryList"
+				:key="item.path"
+				class="item"
+				@click="go(item.path)"
+			>
+					<div class="body">
+						<t-icon :name="item.icon" size="1.75rem" />
+						<h2 v-text="item.title" />
+					</div>
+					<p v-text="item.desc" />
 				</div>
-				<p v-text="item.desc" />
-			</div>
 		</section>
-		<div class="tips gray">微信内打开本站可能会经常在扫码时需要授权，建议使用浏览器打开（右上角菜单，使用默认浏览器打开），并添加快捷入口到桌面。</div>
+		<div class="tips gray" v-entrance-transition="visibleEntryList.length * 70">微信内打开本站可能会经常在扫码时需要授权，建议使用浏览器打开（右上角菜单，使用默认浏览器打开），并添加快捷入口到桌面。</div>
 	</div>
 </template>
 

src/pages/tabs/SettingTab.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="management-tab">
-		<t-cell-group class="user-card" theme="card">
+		<t-cell-group class="user-card" theme="card" v-entrance-transition>
 			<t-cell
 				v-if="currentUser"
 				class="info"
@@ -38,7 +38,13 @@
 				</template>
 			</t-cell>
 		</t-cell-group>
-		<t-cell-group v-for="group in visibleMenuGroupList" :key="group.title" :title="group.title" theme="card">
+		<t-cell-group
+			v-for="(group, index) in visibleMenuGroupList"
+			:key="group.title"
+			:title="group.title"
+			theme="card"
+			v-entrance-transition="index * 70"
+		>
 			<t-cell
 				v-for="item in group.items"
 				:key="item.path"

src/pages/tabs/StoreTab.vue

@@ -1,41 +1,41 @@
 <template>
 	<div class="store-tab">
-		<section v-if="canViewStore || canManageStore" class="store-header">
-			<t-cell-group class="store-card" theme="card">
-				<t-cell
-					v-if="canViewStore"
-					class="info"
-					:title="currentStoreStore.currentStoreName"
-					:description="currentStore?.address"
-				/>
-				<t-cell
-					v-if="canSelectStore"
-					class="action"
-					title="切换门店"
-					note="选择使用门店"
-					arrow
-					hover
-					@click="openStorePicker"
-				>
-					<template #leftIcon>
-						<t-icon name="swap" />
-					</template>
-				</t-cell>
-				<t-cell
-					v-if="canManageStore"
-					class="action"
-					title="门店管理"
-					note="管理门店资料和营业日"
-					arrow
-					hover
-					@click="goStoreManagement"
-				>
-					<template #leftIcon>
-						<t-icon name="shop-3" />
-					</template>
-				</t-cell>
-			</t-cell-group>
-		</section>
+			<section v-entrance-transition v-if="canViewStore || canManageStore" class="store-header">
+				<t-cell-group class="store-card" theme="card">
+					<t-cell
+						v-if="canViewStore"
+						class="info"
+						:title="currentStoreStore.currentStoreName"
+						:description="currentStore?.address"
+					/>
+					<t-cell
+						v-if="canSelectStore"
+						class="action"
+						title="切换门店"
+						note="选择使用门店"
+						arrow
+						hover
+						@click="openStorePicker"
+					>
+						<template #leftIcon>
+							<t-icon name="swap" />
+						</template>
+					</t-cell>
+					<t-cell
+						v-if="canManageStore"
+						class="action"
+						title="门店管理"
+						note="管理门店资料和营业日"
+						arrow
+						hover
+						@click="goStoreManagement"
+					>
+						<template #leftIcon>
+							<t-icon name="shop-3" />
+						</template>
+					</t-cell>
+				</t-cell-group>
+			</section>
 		<store-data-charts :key="currentStoreStore.currentStoreId" />
 		<t-popup v-model="storePickerVisible" placement="bottom">
 			<t-picker