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);
|
|
|
|
|
}
|
|
|
|
|
}
|
2026-06-02 18:31:39 +08:00
|
|
|
|
2026-06-02 19:37:29 +08:00
|
|
|
/* Exit: fade + directional slide */
|
|
|
|
|
.page-motion--exit {
|
|
|
|
|
animation: page-out 180ms ease forwards;
|
|
|
|
|
pointer-events: none;
|
2026-06-02 18:31:39 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.page-motion--exit.is-forward {
|
2026-06-02 19:37:29 +08:00
|
|
|
animation: page-slide-out-forward 180ms ease forwards;
|
|
|
|
|
pointer-events: none;
|
2026-06-02 18:31:39 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.page-motion--exit.is-backward {
|
2026-06-02 19:37:29 +08:00
|
|
|
animation: page-slide-out-backward 180ms ease forwards;
|
|
|
|
|
pointer-events: none;
|
2026-06-02 18:31:39 +08:00
|
|
|
}
|
|
|
|
|
|
2026-06-02 19:37:29 +08:00
|
|
|
/* Cancel child's own entrance animation during exit */
|
|
|
|
|
.page-motion--exit .page-motion {
|
|
|
|
|
animation: none !important;
|
2026-06-02 18:31:39 +08:00
|
|
|
}
|
|
|
|
|
|
2026-06-02 19:37:29 +08:00
|
|
|
@keyframes page-out {
|
|
|
|
|
to { opacity: 0; transform: translateY(-6px); }
|
2026-06-02 18:31:39 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes page-slide-out-forward {
|
|
|
|
|
to {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
transform: translateX(-16px);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes page-slide-out-backward {
|
|
|
|
|
to {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
transform: translateX(16px);
|
|
|
|
|
}
|
2026-06-02 19:37:29 +08:00
|
|
|
}
|