Cuando 48 cartas terminan atrapadas: mi solución CSS 🤯
Los maestros de UI nos enseñan a usar view‑transition‑name como si fuera un susurro. Se coloca en el HTML y, de inmediato, el navegador los captura todos. Problema: En una lista de 48 productos, algo de 200 thumbnails y
Artículo
Una lectura sobre tecnología y sistemas digitales, escrita para ir al punto y dejar claras las ideas principales.
Tema principal
desarrollo web
Fuente
dev.to
Puntos clave
- Los maestros de UI nos enseñan a usar view‑transition‑name como si fuera un susurro. Se coloca en el HTML y, de inmediato, el navegador los captura todos.
- Problema: En una lista de 48 productos, algo de 200 thumbnails y una galería de fotos, cada elemento recibe un view‑transition‑name en el CSS. El navegador tiene que hacer snapshot de los 200+ nodos, comparar posiciones
- Insight clave: No la “nombra todo”, nómbralo solo cuando sea necesario. Utilizar un manejador de pageswap para asignar el nombre justo en el comienzo de la navegación y removerlo después de que la transición finalice.
- ‑ Separar identidad y estilo: `view-transition-name` = primary key, único por página. `view-transition-class` = categoría, permite agrupar y estilizar con reglas comunes.
Bloque 1
Los maestros de UI nos enseñan a usar view‑transition‑name como si fuera un susurro. Se coloca en el HTML y, de inmediato, el navegador los captura todos.
Problema: En una lista de 48 productos, algo de 200 thumbnails y una galería de fotos, cada elemento recibe un view‑transition‑name en el CSS. El navegador tiene que hacer snapshot de los 200+ nodos, comparar posiciones y aplicar animaciones a cada uno, aunque solo se haga clic en uno. El resultado: jank, pérdidas de frames y, en dispositivos modestos, bloqueo de la transición.
Bloque 2
Insight clave: No la “nombra todo”, nómbralo solo cuando sea necesario. Utilizar un manejador de pageswap para asignar el nombre justo en el comienzo de la navegación y removerlo después de que la transición finalice.
‑ Separar identidad y estilo: `view-transition-name` = primary key, único por página. `view-transition-class` = categoría, permite agrupar y estilizar con reglas comunes. ‑ Wildcard + clase: `::view-transition-group(.card)` aplica un solo bloque a cientos de cards sin generar miles de selectores. ‑ Lifecycle: { • `pageswap` → asigna name al elemento clicado. • `pagereveal` → asigna el mismo name en la target. • `finished` → borra el nombre para evitar colisiones. } ‑ Ventaja: Solo el elemento activo participa; el navegador no pierde recursos en el resto.
Bloque 3
Conclusión: Si largas tu código con `view-transition-name` en el CSS global, la escalabilidad del front se vuelve un pánico. La realidad es que, con view‑transition‑class y una lógica just‑in‑time, todas las listas, detalles o galerías pueden escalar a cientos de elementos sin romper la experiencia.
¿Ustedes ya usan view‑transition‑class en sus proyectos de micro frontends o han encontrado otro patrón para evitar el ‘snap‑all’?