view-transitions
Installation
SKILL.md
View Transitions API
Guia para implementar view transitions en SPAs y MPAs, con soporte para React y Next.js.
Modelo Mental
La View Transitions API automatiza el patron FLIP (First, Last, Invert, Play) a nivel del browser. El browser captura screenshots del estado actual, vos actualizas el DOM, el browser captura el nuevo estado y anima entre ambos usando CSS Animations sobre pseudo-elementos generados.
Hay dos variantes que comparten los mismos building blocks:
| Variante | Trigger | Caso de uso |
|---|---|---|
| Same-document (SPA) | document.startViewTransition(callback) |
Cambios de estado en SPAs |
| Cross-document (MPA) | Navegacion + @view-transition CSS at-rule |
Navegacion entre paginas HTML |