✨ feat:

pages/index/index.vue

@@ -62,34 +62,38 @@
 	let appName = ref('')
 
 	// 入场动画状态
-	const pageReady = ref(false)
-	const contentReady = ref(false)
+	const pageIn = ref(false)
+	const contentIn = ref(false)
 
-	onMounted(() => {
-		// 页面挂载后立即触发名片动画
-		requestAnimationFrame(() => {
-			pageReady.value = true
-		})
-		// 名片动画快结束时触发内容动画
-		setTimeout(() => {
-			contentReady.value = true
-		}, 400)
-	})
-
-	// 名片卡片：淡入 + 轻微放大
+	// 名片卡片：默认可见，过渡由 onMounted 触发
 	const cardStyle = computed(() => ({
-		opacity: pageReady.value ? 1 : 0,
-		transform: pageReady.value ? 'scale(1) translateY(0)' : 'scale(0.92) translateY(-20rpx)',
-		transition: 'all 0.5s cubic-bezier(0.34, 1.3, 0.64, 1)',
+		opacity: '1',
+		transform: pageIn.value ? 'scale(1) translateY(0)' : 'scale(0.92) translateY(-20px)',
+		transition: pageIn.value ? 'all 0.55s cubic-bezier(0.34, 1.3, 0.64, 1)' : 'none',
 	}))
 
-	// 企业简介：从底部淡入滑入
+	// 企业简介：从底部淡入
 	const contentCardStyle = computed(() => ({
-		opacity: contentReady.value ? 1 : 0,
-		transform: contentReady.value ? 'translateY(0)' : 'translateY(40rpx)',
-		transition: 'all 0.45s ease-out',
+		opacity: '1',
+		transform: contentIn.value ? 'translateY(0)' : 'translateY(40px)',
+		transition: contentIn.value ? 'all 0.45s ease-out' : 'none',
 	}))
 
+	onMounted(() => {
+		// 先同步设偏移位置（transition: none 无动画）
+		pageIn.value = false
+		contentIn.value = false
+		// 强制刷新后改为目标值，transition 生效
+		const trigger = () => {
+			pageIn.value = true
+		}
+		// 用两次 setTimeout 0 确保浏览器完成样式计算再触发
+		setTimeout(trigger, 30)
+		setTimeout(() => {
+			contentIn.value = true
+		}, 350)
+	})
+
 	onShareAppMessage(() => {
 		return {
 			path: 'pages/splash/splash?userId=' + cardInfo.value.userId,

pages/mine/card.vue

@@ -60,26 +60,31 @@
 	let appName = ref('')
 
 	// 入场动画
-	const pageReady = ref(false)
-	const contentReady = ref(false)
-
-	onMounted(() => {
-		requestAnimationFrame(() => { pageReady.value = true })
-		setTimeout(() => { contentReady.value = true }, 400)
-	})
+	const pageIn = ref(false)
+	const contentIn = ref(false)
 
 	const cardStyle = computed(() => ({
-		opacity: pageReady.value ? 1 : 0,
-		transform: pageReady.value ? 'scale(1) translateY(0)' : 'scale(0.92) translateY(-20px)',
-		transition: 'all 0.5s cubic-bezier(0.34, 1.3, 0.64, 1)',
+		opacity: '1',
+		transform: pageIn.value ? 'scale(1) translateY(0)' : 'scale(0.92) translateY(-20px)',
+		transition: pageIn.value ? 'all 0.55s cubic-bezier(0.34, 1.3, 0.64, 1)' : 'none',
 	}))
 
 	const contentCardStyle = computed(() => ({
-		opacity: contentReady.value ? 1 : 0,
-		transform: contentReady.value ? 'translateY(0)' : 'translateY(40px)',
-		transition: 'all 0.45s ease-out',
+		opacity: '1',
+		transform: contentIn.value ? 'translateY(0)' : 'translateY(40px)',
+		transition: contentIn.value ? 'all 0.45s ease-out' : 'none',
 	}))
 
+	onMounted(() => {
+		// 初始：偏移位置（无动画）
+		pageIn.value = false
+		contentIn.value = false
+		// 30ms 后触发名片动画
+		setTimeout(() => { pageIn.value = true }, 30)
+		// 350ms 后触发内容动画
+		setTimeout(() => { contentIn.value = true }, 350)
+	})
+
 	const makeCall = () => {
 		if (cardInfo.value.phonenumber) {
 			uni.makePhoneCall({
@@ -180,6 +185,8 @@
 
 	.page-top {
 		margin: 0 24rpx 24rpx;
+		position: relative;
+		z-index: 2;
 	}
 
 	// 名片内容区域

pages/mine/userCard.vue

@@ -58,26 +58,31 @@
 	let appName = ref('')
 
 	// 入场动画
-	const pageReady = ref(false)
-	const contentReady = ref(false)
-
-	onMounted(() => {
-		requestAnimationFrame(() => { pageReady.value = true })
-		setTimeout(() => { contentReady.value = true }, 400)
-	})
+	const pageIn = ref(false)
+	const contentIn = ref(false)
 
 	const cardStyle = computed(() => ({
-		opacity: pageReady.value ? 1 : 0,
-		transform: pageReady.value ? 'scale(1) translateY(0)' : 'scale(0.92) translateY(-20px)',
-		transition: 'all 0.5s cubic-bezier(0.34, 1.3, 0.64, 1)',
+		opacity: '1',
+		transform: pageIn.value ? 'scale(1) translateY(0)' : 'scale(0.92) translateY(-20px)',
+		transition: pageIn.value ? 'all 0.55s cubic-bezier(0.34, 1.3, 0.64, 1)' : 'none',
 	}))
 
 	const contentCardStyle = computed(() => ({
-		opacity: contentReady.value ? 1 : 0,
-		transform: contentReady.value ? 'translateY(0)' : 'translateY(40px)',
-		transition: 'all 0.45s ease-out',
+		opacity: '1',
+		transform: contentIn.value ? 'translateY(0)' : 'translateY(40px)',
+		transition: contentIn.value ? 'all 0.45s ease-out' : 'none',
 	}))
 
+	onMounted(() => {
+		// 初始：偏移位置（无动画）
+		pageIn.value = false
+		contentIn.value = false
+		// 30ms 后触发名片动画
+		setTimeout(() => { pageIn.value = true }, 30)
+		// 350ms 后触发内容动画
+		setTimeout(() => { contentIn.value = true }, 350)
+	})
+
 	onShareAppMessage(() => {
 		return {
 			userName: '小程序',
@@ -182,6 +187,8 @@
 	}
 	.page-top {
 		margin: 0 24rpx 24rpx;
+		position: relative;
+		z-index: 2;
 	}
 	// 名片内容区域
 	.card-content {