diff --git a/public/router.js b/public/router.js index 7a769c0..3907518 100644 --- a/public/router.js +++ b/public/router.js @@ -350,20 +350,12 @@ async function renderPage(route, previousPath = null) { // Richtung bestimmen (previousPath ist der alte Pfad vor der Navigation) const direction = getDirection(previousPath, route.path); - const outClass = direction === 'right' ? 'page-transition--out-left' : 'page-transition--out-right'; const inClass = direction === 'right' ? 'page-transition--in-right' : 'page-transition--in-left'; // Performance: backdrop-filter während Übergang deaktivieren (Android-Optimierung). // glass.css setzt alle backdrop-filter im app-content auf none solange diese Klasse aktiv ist. document.documentElement.classList.add('navigating'); - // Alte Seite kurz ausfaden, falls vorhanden - const oldPage = content.querySelector('.page-transition'); - if (oldPage) { - oldPage.classList.add(outClass); - await new Promise(r => setTimeout(r, 120)); - } - // Alter Inhalt ist jetzt weg - altes Stylesheet kann entfernt werden const pageWrapper = document.createElement('div'); pageWrapper.className = 'page-transition'; diff --git a/public/styles/layout.css b/public/styles/layout.css index ea58c11..d9ce003 100755 --- a/public/styles/layout.css +++ b/public/styles/layout.css @@ -80,6 +80,11 @@ to { opacity: 0; transform: translateX(20px); } } +@keyframes page-crossfade-in { + from { opacity: 0; } + to { opacity: 1; } +} + .page-transition--in-right { animation: page-slide-in-right 0.2s var(--ease-out); } @@ -95,6 +100,11 @@ pointer-events: none; } +.page-transition--crossfade { + animation: page-crossfade-in 0.18s var(--ease-out); + opacity: 1; +} + @media (prefers-reduced-motion: reduce) { .page-transition--in-right, .page-transition--in-left { @@ -105,6 +115,10 @@ .page-transition--out-right { animation: none; } + .page-transition--crossfade { + animation: none; + opacity: 1; + } } /* --------------------------------------------------------