Files
omniai-web/src/styles/components/page-transition.css
T

56 lines
1.0 KiB
CSS
Raw Normal View History

2026-06-02 12:38:01 +08:00
.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);
}
}