修复翻页时钟动画效果

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

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

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;
 }
 

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}>