View Transition

Shared-Element Morph

…

Setzt du view-transition-name statisch aufs Element, wird jede Layout-Änderung (Größe, Position, Border-Radius) zur flüssigen Interpolation — ohne JS-Choreografie. Klick öffnet die Karte, Klick schließt sie.

/* CSS: eine Zeile am Container reicht */
.card { view-transition-name: card; }

/* JS: ein Klick, ein Class-Toggle */
card.onclick = () => document.startViewTransition(
  () => card.classList.toggle("open")
);

Warum das reicht: Der Browser sieht in Alt- und Neu-Snapshot dasselbe benannte Element und interpoliert die Bounding-Box automatisch. Kein Namen-Umschieben, keine zwei Elemente, keine .finished-Aufräumkette.

Kartentitel