From a3d40120644ae2817a5786423af7a6e6830f3740 Mon Sep 17 00:00:00 2001
From: ysm <cleverysm@163.com>
Date: Mon, 23 Mar 2026 17:08:02 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=BF=BB=E9=A1=B5=E6=97=B6?=
 =?UTF-8?q?=E9=92=9F=E5=8A=A8=E7=94=BB=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修正下半翻转片动画方向：从 -90° 向下翻转至 0°
- 移除透明度渐变，依靠 backface-visibility 实现硬切换效果
- 简化 transform 计算，使用 CSS transform-origin 控制旋转轴
- 调整层级确保上半翻转片在下半翻转片之上

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/FlipDigit.css |  4 +++-
 src/components/FlipDigit.tsx | 16 ++++++++--------
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/components/FlipDigit.css b/src/components/FlipDigit.css
index 3d61767..b5c850a 100644
--- a/src/components/FlipDigit.css
+++ b/src/components/FlipDigit.css
@@ -69,7 +69,8 @@
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
   backface-visibility: hidden;
-  z-index: 10;
+  z-index: 11;
+  /* 旋转轴在底部边缘（卡片中线位置） */
   transform-origin: center bottom;
 }
 
@@ -87,6 +88,7 @@
   border-bottom-right-radius: 4px;
   backface-visibility: hidden;
   z-index: 10;
+  /* 旋转轴在顶部边缘（卡片中线位置） */
   transform-origin: center top;
 }
 
diff --git a/src/components/FlipDigit.tsx b/src/components/FlipDigit.tsx
index 74ff17f..a540459 100644
--- a/src/components/FlipDigit.tsx
+++ b/src/components/FlipDigit.tsx
@@ -42,14 +42,16 @@ export function FlipDigit({ value, size }: FlipDigitProps) {
 
   // Start bottom animation after top completes
   const startBottomAnimation = (targetValue: number) => {
+    // 上半片翻转完成后，更新上半翻转片的值为新值
+    // 这样当 finishAnimation 重置 rotation 时，上半翻转片显示正确的值
     setFlipTopValue(targetValue);
 
-    // Animate bottom flap from -90deg to 0deg
+    // 第二阶段：下半片从-90°向下翻转90°到0°
     requestAnimationFrame(() => {
       setBottomRotation(0);
     });
 
-    // After bottom animation completes, update bgBottom and finish
+    // 下半片翻转完成后，背景下半更新为新值
     setTimeout(() => {
       setBgBottomValue(targetValue);
       setTimeout(() => {
@@ -109,14 +111,12 @@ export function FlipDigit({ value, size }: FlipDigitProps) {
 
   const topFlipStyle = {
     height: `${halfHeight}px`,
-    transform: `perspective(1000px) translateY(${halfHeight * 0.5}px) rotateX(${topRotation}deg) translateY(${-halfHeight * 0.5}px)`,
-    opacity: topRotation > 60 ? 0 : 1,
+    transform: `perspective(1000px) rotateX(${topRotation}deg)`,
   };
 
   const bottomFlipStyle = {
     height: `${halfHeight}px`,
-    transform: `perspective(1000px) translateY(${-halfHeight * 0.5}px) rotateX(${bottomRotation}deg) translateY(${halfHeight * 0.5}px)`,
-    opacity: bottomRotation > -60 ? 1 : 0,
+    transform: `perspective(1000px) rotateX(${bottomRotation}deg)`,
   };
 
   const centerLineStyle = {
@@ -145,7 +145,7 @@ export function FlipDigit({ value, size }: FlipDigitProps) {
         style={{
           ...halfHeightStyle,
           ...topFlipStyle,
-          transition: isAnimating ? 'transform 300ms ease-in, opacity 300ms ease-in' : 'none',
+          transition: isAnimating ? 'transform 300ms ease-in' : 'none',
         }}
       >
         <span className="flip-digit-text flip-digit-top-text" style={topTextStyle}>
@@ -160,7 +160,7 @@ export function FlipDigit({ value, size }: FlipDigitProps) {
           style={{
             ...halfHeightStyle,
             ...bottomFlipStyle,
-            transition: isAnimating ? 'transform 300ms ease-out, opacity 300ms ease-out' : 'none',
+            transition: isAnimating ? 'transform 300ms ease-out' : 'none',
           }}
         >
           <span className="flip-digit-text flip-digit-bottom-text" style={bottomTextStyle}>