Files
oikos/public
Ulas 2a2249182e feat: Phase 3 - Micro-Interactions + Polish
glass.css - Phase 3 Ergänzungen:

Nav Auto-Hide (Section 18):
- .nav-bottom: will-change: transform + transition für smooth slide
- .nav-bottom--hidden: translateY(100% + safe-area) + pointer-events: none

Modal Spring-Entrance (Section 19):
- Desktop: glass-modal-scale-in mit --ease-glass (spring overshoot)
  0.32s, scale(0.90) → scale(1) + translateY(8px) → 0
- Mobile: glass-sheet-in, sanfterer Slide (40% statt 100%) + opacity ramp
- Beide Animationen ersetzen die linearen layout.css-Varianten

Seitentransitionen (Section 20):
- In-Animationen: 0.30s mit --ease-glass statt 0.20s ease
- Out-Animationen: 0.14s mit --ease-out (schnell raus, langsam rein)

List-Stagger (Section 21):
- 0.28s + --ease-glass für physikalisch plausibleren Erscheinungseffekt

Focus-Ring (Section 22):
- transition auf outline-offset + box-shadow für sanften Focus-Pop

Skeleton Shimmer (Section 23):
- 105° Gradient mit glass-highlight-Tint statt flat-grey
- Hellerer Mittelpunkt simuliert Lichtreflexion

FAB Attention Pulse (Section 24):
- Einmaliger Ring-Expand 0.6s nach Erscheinen (fab-ring-pulse)
- Kombinierte animation-Deklaration mit fab-in

Accessibility (Section 25):
- prefers-reduced-motion deaktiviert alle Phase-3-Animationen

router.js:
- initNavHideOnScroll(): scroll-Listener auf #main-content
  versteckt .nav-bottom beim Runterscrollen (+ 4px Hysterese)
  zeigt wieder beim Hochscrollen (- 4px) oder bei < 10px
  nur aktiv bei < 1024px (Mobile/Tablet, kein Desktop)
- wird in renderAppShell() nach initBottomNavSwipe() aufgerufen
2026-04-13 17:11:38 +02:00
..