openclaw/oikos
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: directional slide-x page transitions in router

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Ulas
2026-03-30 17:08:49 +02:00
parent 194728bbe9
commit bc3f855fa9
2 changed files with 61 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/styles/layout.css
+39 -10
View File
@@ -44,22 +44,51 @@
}
/* --------------------------------------------------------
* Seiten-Übergangs-Animation
* Seiten-Übergangs-Animation (direktional)
* -------------------------------------------------------- */
@keyframes page-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
@keyframes page-slide-in-right {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes page-slide-in-left {
from { opacity: 0; transform: translateX(-20px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes page-out-left {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(-20px); }
}
@keyframes page-out-right {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(20px); }
}
@keyframes page-out {
from { opacity: 1; }
to { opacity: 0; }
.page-transition--in-right {
animation: page-slide-in-right 0.2s var(--ease-out) forwards;
}
.page-transition--out {
animation: page-out 0.12s ease forwards;
.page-transition--in-left {
animation: page-slide-in-left 0.2s var(--ease-out) forwards;
}
.page-transition--out-left {
animation: page-out-left 0.12s ease forwards;
pointer-events: none;
}
.page-transition--out-right {
animation: page-out-right 0.12s ease forwards;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.page-transition--in-right,
.page-transition--in-left {
animation: none;
opacity: 1;
}
.page-transition--out-left,
.page-transition--out-right {
animation: none;
}
}
/* --------------------------------------------------------
* Layout: Mobile (Standard, < 1024px)