Hay muchas formas de gestionar View Transition, sin embargo, vamos a centrarnos en la forma más sencilla de aplicar View Transition a nuestra página, de modo que esas transiciones entre páginas sean más sutiles y suaves.
La regla @view-transition
En primer lugar, necesitaremos añadir el siguiente código CSS en nuestra página. Utilizaremos la regla @view-transition
, donde en su interior, usaremos la propiedad navigation
con el valor auto
:
@view-transition {
navigation: auto;
}
La propiedad navigation
, sólo funciona en el interior de la regla @view-transition
, y puede tomar los valores auto
o none
. Por defecto, toma none, es decir, las View Transition estarán desactivadas. En el caso de indicar auto
, las View Transition estarán activadas en las páginas del mismo dominio.
Sólo con este pequeño cambio, ya tendremos las View Transición funcionando. Sin embargo, su correcto funcionamiento dependerá de lo bien escrito que se encuentre el HTML y la coherencia que tenga, y muchas veces no será suficiente.
La propiedad view-transition-name
Ya tenemos unas transiciones suaves por defecto, pero habitualmente serán muy genéricas por lo que puede ser que nos interese hacerlas vistosas. Podemos utilizar la propiedad CSS view-transition-name
mediante la cuál podemos darle un nombre al elemento HTML para personalizar su transición:
Propiedad | Valor | Descripción |
---|---|---|
view-transition-name | none | | Nombramos un elemento para usarlo en los pseudoelementos. |
Así pues, por ejemplo, podríamos elegir el elemento con clase .container
que es el que tiene todo el contenido de texto de la página, para animarlo posteriormente.
En este caso, le daremos el nombre de page
(podría ser cualquier otro nombre):
.container {
view-transition-name: page;
}
Bien, nuestro elemento ya está nombrado para utilizarlo en las View Transition con los pseudoelementos que explicaremos a continuación. ¡Vamos allá!
La vista inicial y final
Ahora, para personalizar nuestras animaciones, después de haber nombrado los elementos que queremos animar, vamos a utilizar los pseudoelementos CSS que hacen referencia a las «fotos» que las View Transition toman cuando navegamos a otra página o vista.
Por un lado, el pseudoelemento ::view-transition-old()
hace referencia a la «foto» del DOM de la página anterior (al pulsar en el enlace a navegar), y el pseudoelemento ::view-transition-new()
hace referencia a la «foto» del DOM de la página nueva (a la que hemos navegado):
Pseudoelementos | Descripción |
---|---|
::view-transition-old( ) | Inicio de la transición. Referencia al DOM de la página de la que salimos. |
::view-transition-new( ) | Final de la transición. Referencia al DOM de la página a la que entramos. |
A continuación, veamos un ejemplo donde actuaría estas View Transition. El código en cuestión que tendríamos que escribir sería el siguiente:
::view-transition-old(page) {
animation: fade 0.2s linear forwards;
}
::view-transition-new(page) {
animation: fade 0.3s linear reverse;
}
¿Cómo actuarían estas animaciones?
-
Animación en la página de salida: En el primer caso, el pseudoelemento
::view-transition-old()
indica que el elemento nombrado comopage
, debe realizar una animaciónfade
durante0.2s
a un ritmo constantelinear
. Una vez termine, se quedará en el último frameforwards
. -
Animación en la página de entrada: Tras la animación anterior, el pseudoelemento
::view-transition-new()
indica que el elemento nombrado comopage
, debe realizar la misma animaciónfade
, pero durante0.3s
y al revés, de esta forma nos ahorramos tener que crear dos animaciones diferentes.
Si no sabes crear animaciones de CSS, en el siguiente artículo te explico como funcionan y como puedes crear una de forma muy sencilla: Animaciones con CSS.
Ejemplo de View Transitions
Veamos ahora el ejemplo completo y expliquemos como se realiza la animación fade
paso a paso:
@view-transition {
navigation: auto;
}
.container {
view-transition-name: page;
}
::view-transition-old(page) {
animation: fade 0.2s linear forwards;
}
::view-transition-new(page) {
animation: fade 0.3s linear reverse;
}
@keyframes fade {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(50px);
}
}
-
La animación
fade
establecida en el pseudoelemento de inicio (old) ocultará el contenido del elemento.container
(baja el opacity hasta cero), y mientras lo hace, hará que descienda50px
hacia abajo. -
Al terminar, continuará la animación
fade
establecida en el pseudoelemento de final (new), que realizará la animación al revés, es decir, aparecerá de estar completamente invisible y se desplazará50px
hacia arriba, volviendo a su punto natural.