Transiciones (:transition)

Cada actualización de un binding con :transition se envuelve en document.startViewTransition(). Modificadores: .fade, .scale, .slideup, y .shared="nombre" para fundir un par viejo/nuevo. Se desactivan solos con prefers-reduced-motion, sin la API (p. ej. Firefox) o con una transición en curso. Los modificadores usan view-transition-class — el CSS de soporte vive en weblin.org/css.css (ver docs/api.md para copiarlo).

:transition.scale — el número escala

0

:transition.fade — el texto se desvanece

Inicio

:transition.slideup — vistas con :if

:transition.shared="logo" — morph de un elemento

☀️

El mismo elemento con view-transition-name: logo funde su contenido al cambiar. Un morph de par (dos elementos distintos con el mismo nombre) no es fiable en el modelo granular: usa un contenedor :transition para animar el cambio de vistas.

:transition.slideup con :each