From cfb218ba287176d93f89b7aebc35d560c4f11636 Mon Sep 17 00:00:00 2001
From: jiangchen <1703935164@qq.com>
Date: Tue, 1 Sep 2026 20:30:40 +0800
Subject: [PATCH] fix: use class-driven step animation (s0->s1->s2->s0) to
 avoid inline-style black screen

---
 src/pages/index/index.ux | 29 +++++++++++++++++++----------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/pages/index/index.ux b/src/pages/index/index.ux
index a1a4231..8c24e89 100644
--- a/src/pages/index/index.ux
+++ b/src/pages/index/index.ux
@@ -23,7 +23,7 @@
             <text class="bubble-text">{{bubbleText}}</text>
           </div>
         </div>
-        <image class="mascot" style="transform: scale({{mascotSX}}, {{mascotSY}})" src="/common/dsniang.png" onclick="onTap" />
+        <image class="mascot step{{animStep}}" src="/common/dsniang.png" onclick="onTap" />
         <text class="peak {{isPeak ? 'peak-red' : 'peak-green'}}">{{peakLabel}}</text>
         <text class="stats">余额 {{balance}}</text>
         <text class="stats">今日 {{todayTokens}} tokens · 预估 ¥{{todayCost}}</text>
@@ -91,8 +91,7 @@ export default {
     bubbleVisible: false,
     bubbleText: '',
     bubbleIndex: 0,
-    mascotSX: 1,
-    mascotSY: 1,
+    animStep: 0,
     settings: {
       serverUrl: 'ws://127.0.0.1:8787',
       userId: '',
@@ -150,15 +149,13 @@ export default {
   },
 
   onTap() {
-    // Q 弹：压扁 -> 回弹过冲 -> 回正（多帧驱动，不依赖 CSS transition）
+    // Q 弹：压扁(s1) -> 回弹过冲(s2) -> 回正(s0)，类名驱动
     const self = this
-    this.mascotSX = 1.00
-    this.mascotSY = 1.00
-    setTimeout(() => { self.mascotSX = 1.06; self.mascotSY = 0.84 }, 0)
-    setTimeout(() => { self.mascotSX = 0.98; self.mascotSY = 1.06 }, 60)
-    setTimeout(() => { self.mascotSX = 1.00; self.mascotSY = 1.00 }, 120)
+    this.animStep = 1
+    setTimeout(() => { self.animStep = 2 }, 60)
+    setTimeout(() => { self.animStep = 0 }, 130)
     // 回弹时播鸭叫
-    setTimeout(() => { playDuckSound() }, 120)
+    setTimeout(() => { playDuckSound() }, 130)
 
     // 轮播趣味/上轮消耗信息
     const idx = this.bubbleIndex % this.bubblePresets.length
@@ -268,6 +265,18 @@ export default {
   transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
+.step0 {
+  transform: scale(1, 1);
+}
+
+.step1 {
+  transform: scale(1.06, 0.84);
+}
+
+.step2 {
+  transform: scale(0.98, 1.06);
+}
+
 .peak {
   font-size: 22px;
   font-weight: bold;