View Transitions 1.2.0

Die View Transitions API nutzen, um Elemente zwischen Seitenzuständen weich zu morphen — nur mit CSS-Klassen. English: View Transitions

Reifegrad: In VelinStyle 1.2.0 als stable dokumentiert. Design Intelligence (Plan / Review / Agent Meta) ist getrennt und dort beta / foundation, wo es markiert ist.

Wann verwenden

Same-Document- oder MPA-View-Transitions, wenn der Browser die API unterstützt.
Als Progressive Enhancement behandeln — nicht als Voraussetzung für die Kern-UX.

Wann nicht

prefers-reduced-motion bei dekorativer Bewegung nicht ignorieren.
Keine Attention-Loops auf großen Inhaltsbereichen verwenden — CSS-Tokens und kurze Dauern bevorzugen.

Überblick

VelinStyle stellt Utilities bereit, die view-transition-name setzen und mit der View Transitions API des Browsers für nahtlose Cross-Page- oder SPA-Transitions zusammenspielen.

Transition-Namen

Einen view-transition-name mit .velin-vt-name-* zuweisen:

<!-- Page A -->
<img class="velin-vt-name-hero" src="thumb.jpg" alt="...">

<!-- Page B -->
<img class="velin-vt-name-hero" src="full.jpg" alt="...">

Morph

Elemente mit demselben view-transition-name morphen automatisch zwischen Zuständen, wenn die View Transitions API verwendet wird:

document.startViewTransition(() => {
  // Update the DOM — elements with matching
  // velin-vt-name-* classes will morph automatically
  updateContent();
});

Eigene Transitions

::view-transition-old(hero) {
  animation: velin-fade-out 200ms ease-out;
}
::view-transition-new(hero) {
  animation: velin-fade-in 300ms ease-in;
}

Browser-Support

View Transitions bleiben eine stable CSS integration mit VelinStyle-Helfern, ihre Verfügbarkeit ist aber browser-gated. Immer sauber degradieren.