From 305ddef900f5790af3b63f3a53084ddb7d741b0c Mon Sep 17 00:00:00 2001
From: LTbinglingfeng <tan13318527080@163.com>
Date: Sat, 24 Jan 2026 14:03:15 +0800
Subject: [PATCH] fix(ui): improve GSAP page transition smoothness

---
 src/components/common/PageTransition.scss |  8 +++---
 src/components/common/PageTransition.tsx  | 35 ++++++++++-------------
 2 files changed, 19 insertions(+), 24 deletions(-)

diff --git a/src/components/common/PageTransition.scss b/src/components/common/PageTransition.scss
index 6b918cd..81a9e5e 100644
--- a/src/components/common/PageTransition.scss
+++ b/src/components/common/PageTransition.scss
@@ -14,6 +14,8 @@
     gap: $spacing-lg;
     min-height: 0;
     flex: 1;
+    backface-visibility: hidden;
+    transform: translateZ(0);
 
     // During animation, exit layer uses absolute positioning
     &--exit {
@@ -22,17 +24,15 @@
       z-index: 1;
       overflow: hidden;
       pointer-events: none;
+      will-change: transform, opacity;
     }
   }
 
   &--animating &__layer {
     will-change: transform, opacity;
-    backface-visibility: hidden;
-    transform-style: preserve-3d;
   }
 
-  // When both layers exist, current layer also needs positioning
-  &--animating &__layer:not(&__layer--exit) {
+  &--animating &__layer:not(.page-transition__layer--exit) {
     position: relative;
     z-index: 0;
   }
diff --git a/src/components/common/PageTransition.tsx b/src/components/common/PageTransition.tsx
index 1da4636..9d230b0 100644
--- a/src/components/common/PageTransition.tsx
+++ b/src/components/common/PageTransition.tsx
@@ -71,26 +71,17 @@ export function PageTransition({
           ? 'forward'
           : 'backward';
 
-    let cancelled = false;
-
-    queueMicrotask(() => {
-      if (cancelled) return;
-      setTransitionDirection(nextDirection);
-      setLayers((prev) => {
-        const prevCurrent = prev[prev.length - 1];
-        return [
-          prevCurrent
-            ? { ...prevCurrent, status: 'exiting' }
-            : { key: location.key, location, status: 'exiting' },
-          { key: location.key, location, status: 'current' },
-        ];
-      });
-      setIsAnimating(true);
+    setTransitionDirection(nextDirection);
+    setLayers((prev) => {
+      const prevCurrent = prev[prev.length - 1];
+      return [
+        prevCurrent
+          ? { ...prevCurrent, status: 'exiting' }
+          : { key: location.key, location, status: 'exiting' },
+        { key: location.key, location, status: 'current' },
+      ];
     });
-
-    return () => {
-      cancelled = true;
-    };
+    setIsAnimating(true);
   }, [
     isAnimating,
     location,
@@ -152,8 +143,12 @@ export function PageTransition({
         opacity: 1,
         duration: TRANSITION_DURATION,
         ease: 'power2.out', // smooth settle
-        clearProps: 'transform,opacity',
         force3D: true,
+        onComplete: () => {
+          if (currentLayerRef.current) {
+            gsap.set(currentLayerRef.current, { clearProps: 'transform,opacity' });
+          }
+        },
       },
       ENTER_DELAY
     );