stringadmin
e555209516
The three-phase exit→enter→idle flow caused a visible "double refresh" jitter. During the enter phase (220ms), the wrapper animated from opacity:0 while cancelling child .page-motion with animation:none !important. When phase switched to idle, the !important rule was removed and child .page-motion re-triggered, creating a second entrance animation — the jitter. Fix: remove the enter phase entirely. After exit animation (180ms), phase goes directly to idle. The child page's own .page-motion class handles entrance naturally via React's fresh DOM mount. No wrapper animation on enter, no double-animation conflict. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
56 lines
1.0 KiB
CSS
56 lines
1.0 KiB
CSS
.page-transition {
|
|
position: relative;
|
|
flex: 1;
|
|
min-height: 0;
|
|
animation: page-fade-in 150ms ease-out both;
|
|
}
|
|
|
|
@keyframes page-fade-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(4px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Exit: fade + directional slide */
|
|
.page-motion--exit {
|
|
animation: page-out 180ms ease forwards;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.page-motion--exit.is-forward {
|
|
animation: page-slide-out-forward 180ms ease forwards;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.page-motion--exit.is-backward {
|
|
animation: page-slide-out-backward 180ms ease forwards;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Cancel child's own entrance animation during exit */
|
|
.page-motion--exit .page-motion {
|
|
animation: none !important;
|
|
}
|
|
|
|
@keyframes page-out {
|
|
to { opacity: 0; transform: translateY(-6px); }
|
|
}
|
|
|
|
@keyframes page-slide-out-forward {
|
|
to {
|
|
opacity: 0;
|
|
transform: translateX(-16px);
|
|
}
|
|
}
|
|
|
|
@keyframes page-slide-out-backward {
|
|
to {
|
|
opacity: 0;
|
|
transform: translateX(16px);
|
|
}
|
|
} |