feat(a14): Übergangsanimation Schritt 2 zu 3#77
Merged
Conversation
… (kein Zeilen-Kreuzen)
…etail von rechts) Ersetzt den Flip-basierten Morph durch eine gerichtete Zwei-Phasen-Animation: - Phase 1 (vor dem Wechsel): die noch lebende Step-2-Tabelle kollabiert von rechts nach links auf die Rail-Breite (320px), die Stat-Spalten werden am rechten Rand weggeclippt, die Suchleiste schrumpft/fadet mit. - Phase 2 (nach dem Wechsel): der Detailbereich slidet als ein Block von rechts herein, die Rail-Liste blendet sanft ein. Damit entfallen die vielen Streubewegungen des alten Flip-Ansatzes (tr->div unter position:absolute, nicht renderbare Leave-Zellen). Gemeinsamer zentrierter Container fuer Schritt 2 und 3 haelt die linke Kante deckungsgleich. Navigation laeuft ueber onProceed(); reduced-motion wechselt weiterhin sofort ohne Animation. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…der-Cross-fade Behebt die restliche Unruhe beim Uebergang Schritt 2 -> 3: - Box-Hoehe wird von der gemessenen Step-2-Hoehe auf die Step-3-Hoehe animiert (kein Hoehensprung, keine unterschiedlich grossen Boxen). - Die Rail-Liste gleitet um den gemessenen y-Versatz (Rail-Header ist hoeher als der Step-2-Kopf) nach oben in Position, statt zu springen. - Kopfbereich als weiche Ueberblendung: Step-2-Leiste + Tabellenkopf faden am Ende von Phase 1 aus, der Rail-Header fadet in Phase 2 ein (kein hartes Verschwinden/Erscheinen). Statt fragiler Pixelwerte werden y-Versatz und Box-Hoehe zur Laufzeit gemessen; die Kollaps-Breite nutzt denselben Rail-Token wie Schritt 3. GSAP Flip entfaellt komplett (Tabellenzeilen/-zellen lassen sich losgeloest nicht sauber animieren). MORPH_TIMESCALE erlaubt Zeitlupe zum Inspizieren. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…rtikal-Sprung Reaktion auf Feedback (Vertikalbewegung zu ploetzlich, zu viel Whitespace in Schritt 3, weisses Flackern): - Schritt-3-Box (.config-shell) bekommt dieselbe feste Hoehe wie die Step-2- Tabelle; Liste und Detailbereich scrollen bei Bedarf intern. Damit entfaellt die nach unten wachsende Hoehenanimation und Schritt 3 hat weniger Leerraum. - Phase 2 macht keine vertikale Zeilen-/Box-Bewegung mehr: die beiden gleich hohen Boxen werden ueberblendet (Cross-fade), nur der Detailbereich slidet weiter von rechts herein. Einzige gerichtete Bewegungen: Kollaps rechts->links und Detail rechts->links. - Weisses Flackern behoben: Phase 2 startet in requestAnimationFrame (vor dem Paint), sodass die einfliegenden Elemente vor dem ersten Frame versteckt sind. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Ursache (per Frame-Analyse): kein leeres Frame beim Komponententausch, aber die vom Kollaps freigelegte Flaeche und der Bereich hinter dem einsliden den Detailbereich waren weiss (Seiten-/config-shell-Hintergrund) -> ~280ms weisser Blitz in der Mitte. - Keine Opacity-Fades mehr auf Schritt 2/3 (ein Fade-in aus 0 erzeugt beim harten Swap zwangslaeufig ein transparentes/weisses Frame). Schritt 3 erscheint sofort deckend; einzige Einflug-Bewegung ist der Detail-Slide von rechts. - Phase-2-Start laeuft synchron nach cdr.detectChanges() (vor dem Paint), daher kein Ein-Frame-Blitz des Detailbereichs an seiner Zielposition. - config-shell-Hintergrund auf denselben Grauton wie der Detailbereich; waehrend des Morphs bekommt .step-container denselben Grau-Backdrop. Freigelegte Flaechen und der Bereich hinter dem Slide sind damit grau statt weiss -> kein Flackern. Verifiziert: Frame-fuer-Frame-Monitor zeigt kein leeres/weisses Frame; Produktion 0 Fehler, reduced-motion sofort. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Der Grau-Backdrop lag auf dem bleibenden .step-container und wurde am Ende wieder entfernt -> sichtbarer Wechsel weiss->grau->weiss. Jetzt wird das Grau nur noch aus der (beim Swap zerstoerten) Step-2-Box heraus enthuellt: - Die Tabellen-Box behaelt volle Breite und bekommt den grauen Detail-Ton; ihr rechtes Padding waechst, sodass die Tabelle (per overflow hidden geclippt) von rechts auf Rail-Breite schrumpft und dabei das boxeigene Grau freilegt. - Da die Tabelle die Box zu Beginn voll abdeckt, wird das Grau nur DURCH den Kollaps sichtbar (kein Aufblitzen am Start), und kein bleibendes Element wechselt die Farbe (kein Zurueck-zu-weiss). - step-container-Tint samt morphing-Flag wieder entfernt. Verifiziert: Produktion 0 Fehler, reduced-motion sofort. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Der Kollaps animierte zuvor Breite/Padding der Tabellen-Box -> in jedem Frame ein komplettes Neu-Layout der Tabelle (inkl. Mini-Histogramme), was ruckelte. Jetzt schiebt ein graues Overlay-Panel (gleicher Detail-Ton) per translateX von rechts ueber die Stat-Spalten. Reine, GPU-kompositierte Transform-Animation ohne Reflow. Das Panel liegt ueber dem Sticky-Header (z-index 15) und ist Teil des beim Swap zerstoerten Step-2-DOM (kein Cleanup noetig). Verifiziert: Produktion 0 Fehler, reduced-motion sofort. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…scheinen Der Rail-Header (Suche + Typ-Filter) erschien in Phase 2 ohne Bewegung. Jetzt slidet er per translateY (yPercent -100 -> 0) von oben in seinen Slot; er startet oberhalb der Box und wird vom overflow:hidden der config-shell geclippt, taucht also von der Oberkante her auf. Reine Transform, Startzustand vor dem Paint gesetzt (kein Flackern). Verifiziert: Produktion 0 Fehler, reduced-motion sofort. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Collaborator
Author
|
ready to merge |
# Conflicts: # src/app/preprocessing-wizard/steps/step2-column-selection/step2-column-selection.component.html # src/app/preprocessing-wizard/steps/step2-column-selection/step2-column-selection.component.scss # src/app/preprocessing-wizard/steps/step2-column-selection/step2-column-selection.component.ts # src/app/preprocessing-wizard/steps/step3-configure-data-features/step3-configure-data-features.component.html
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Ticket
A14 – Übergänge zwischen den Schritten sichtbar machen (Animation Schritt 2 → 3).
Was gemacht
stepTransitionauf.step-container, nur beim WechselcurrentStep1 → 2.translateX(100% → 0)+ Fade). Easingcubic-bezier(0.4,0,0.2,1).prefers-reduced-motion: reduce→[@stepTransition.disabled], sofortiger Wechsel wie bisher.query(..., {optional:true})referenziert (degradiert statt zu brechen, falls Parallel-Tickets Klassen umbenennen).@angular/animations@^21.2.13(passend zu core 21.2.13),provideAnimations()inapp.config.ts.Manuelle Testschritte (Schritt → Ort → Erwartung)
Build
npm run builderfolgreich; nur die vorbestehende Bundle-Budget-Warnung.Hinweis
Konfliktfrei zu den anderen beiden PRs (nur Shell,
app.config.ts,package.json/package-lock.json, neueanimations/-Datei). Sollte zuerst gemergt werden.package.json/package-lock.jsonenthalten die neue Dependency und müssen mit gemergt werden.