Las View Transitions son una API moderna de los navegadores que permite crear transiciones suaves entre cambios de vista o página sin necesidad de JavaScript complejo.
Funciona emparejando elementos con el mismo view-transition-name entre la vista actual y la nueva, de modo que el navegador anima automáticamente su posición, tamaño y estilo, logrando efectos de desplazamiento, escalado o fade de forma nativa y fluida.
La API de View Transitions NO está implementada en todos los navegadores todavía. Puedes consultar el soporte actualizado en Can I Use – View Transitions API.
Pero no te apures, si tu navegador no soporta View Transitions, el estilo no se rompe y simplemente se ignora. Todo seguirá funcionado como si no lo usases.
Para implementar su uso simplemente tenemos que agregar el siguiente código de css a las páginaes entre las que quieras transicionar:
@view-transition {
navigation: auto;
}
Con este simple código ya tendrás un efecto de fade-in / fade-out automático. La página desde la que navegas desaparecerá, mientras que la nueva recien cargada aparecerá gradualmente.
Podemos cambiar este efecto de opacidad por cualquier animación que queramos. Debajo dejo un ejemplo de una transición en la que la página hace un efecto de scroll con una duración personalizada.
@keyframes move-out {
from { transform: translateY(0%); }
to { transform: translateY(-100%); }
}
@keyframes move-in {
from { transform: translateY(100%); }
to { transform: translateY(0%); }
}
::view-transition-old(root) {
animation: 0.4s ease-in both move-out;
}
::view-transition-new(root) {
animation: 0.4s ease-in both move-in;
}
Además de animar toda la transición de la página, podemos animar elementos especificos para que se mantengan entre una página y otra de forma automática y con un efecto vistoso.
Por ejemplo, en esta misma página utilizo este efecto para la transción de los titulos e imagenes de portada. Lo único necesario es especificar el estilo view-transition-name y darle un especificador único que se conserve entre las páginas que vayamos a transicionar.
Por ejemplo, usando blade, genero este nombre único el id de mi post, $post->id, en las dos vistas que quiero enlazar con la animación.
// ruta 'post.index' con el listado de posts con sus imagenes
@foreach ($posts as $post)
<a href="{{ route('post.show', ['slug' => $post->slug]) }}">
<img src="{{ Storage::url($post->imagen->path) }}" alt="{{ $post->titulo }}" style="view-transition-name: imagen-{{ $post->id }}" />
</a>
@endforeach
// ruta 'post.show' donde se muestra el post con la imagen
<img class="portada" src="{{ Storage::url($post->imagen->path) }}" alt="{{ $post->titulo }}" style="view-transition-name: imagen-{{ $post->id }}"/>