chuan/Cli-Proxy-API-Management-Center
1
0
Fork 0
mirror of https://github.com/router-for-me/Cli-Proxy-API-Management-Center.git synced 2026-02-02 10:50:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): improve GSAP page transition smoothness

Browse Source
This commit is contained in:
LTbinglingfeng
2026-01-24 14:03:15 +08:00
parent 7e56d33bf0
commit 305ddef900
2 changed files with 19 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/common/PageTransition.scss
View File

@@ -14,6 +14,8 @@
gap: $spacing-lg; gap: $spacing-lg;
min-height: 0; min-height: 0;
flex: 1; flex: 1;
backface-visibility: hidden;
transform: translateZ(0);
// During animation, exit layer uses absolute positioning // During animation, exit layer uses absolute positioning
&--exit { &--exit {
@@ -22,17 +24,15 @@
z-index: 1; z-index: 1;
overflow: hidden; overflow: hidden;
pointer-events: none; pointer-events: none;
will-change: transform, opacity;
} }
} }
&--animating &__layer { &--animating &__layer {
will-change: transform, opacity; will-change: transform, opacity;
backface-visibility: hidden;
transform-style: preserve-3d;
} }
// When both layers exist, current layer also needs positioning &--animating &__layer:not(.page-transition__layer--exit) {
&--animating &__layer:not(&__layer--exit) {
position: relative; position: relative;
z-index: 0; z-index: 0;
} }

35
src/components/common/PageTransition.tsx
View File

@@ -71,26 +71,17 @@ export function PageTransition({
? 'forward' ? 'forward'
: 'backward'; : 'backward';
let cancelled = false; setTransitionDirection(nextDirection);
setLayers((prev) => {
queueMicrotask(() => { const prevCurrent = prev[prev.length - 1];
if (cancelled) return; return [
setTransitionDirection(nextDirection); prevCurrent
setLayers((prev) => { ? { ...prevCurrent, status: 'exiting' }
const prevCurrent = prev[prev.length - 1]; : { key: location.key, location, status: 'exiting' },
return [ { key: location.key, location, status: 'current' },
prevCurrent ];
? { ...prevCurrent, status: 'exiting' }
: { key: location.key, location, status: 'exiting' },
{ key: location.key, location, status: 'current' },
];
});
setIsAnimating(true);
}); });
setIsAnimating(true);
return () => {
cancelled = true;
};
}, [ }, [
isAnimating, isAnimating,
location, location,
@@ -152,8 +143,12 @@ export function PageTransition({
opacity: 1, opacity: 1,
duration: TRANSITION_DURATION, duration: TRANSITION_DURATION,
ease: 'power2.out', // smooth settle ease: 'power2.out', // smooth settle
clearProps: 'transform,opacity',
force3D: true, force3D: true,
onComplete: () => {
if (currentLayerRef.current) {
gsap.set(currentLayerRef.current, { clearProps: 'transform,opacity' });
}
},
}, },
ENTER_DELAY ENTER_DELAY
); );