View Transition básica

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:

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):

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 como page, debe realizar una animación fade durante 0.2s a un ritmo constante linear. Una vez termine, se quedará en el último frame forwards.

• Animación en la página de entrada: Tras la animación anterior, el pseudoelemento ::view-transition-new() indica que el elemento nombrado como page, debe realizar la misma animación fade, pero durante 0.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 descienda 50px 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.