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-19 03:00: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

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

@@ -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
);