/* Marcar el elemento para la transición */
.main-image {
view-transition-name: main-img; /* nombre único */
}
/* Animar el estado anterior y nuevo */
::view-transition-old(main-img) {
animation: fade-out 0.35s ease-out;
}
::view-transition-new(main-img) {
animation: fade-in 0.35s ease-out;
}
/* JS: envolver el cambio de DOM */
document.startViewTransition(() => {
img.src = newSrc;
});
¿Cómo funciona? Se añade
view-transition-name: main-img al elemento. Al cambiar de slide, JS llama a document.startViewTransition(callback). El navegador captura una foto del estado actual, ejecuta el callback (que cambia el src de la imagen), captura el nuevo estado, y anima entre ambos. Los pseudoelementos ::view-transition-old y ::view-transition-new en CSS controlan la animación. El layout usa CSS Grid para la imagen grande y la tira de miniaturas.