View Transition personalizada

Ya hemos visto la potencia de las View Transition, y lo ideales que son para suavizar la navegación entre páginas mediante transiciones, consiguiendo una experiencia fluida y agradable.

Pero, las View Transition también nos permiten realizar este tipo de transiciones en cambios en el DOM, sin necesidad de producirse una navegación a una nueva página. Para ello, necesitaremos utilizar Javascript y un método que nos permitirá realizar potentes transiciones en acciones específicas.

El método startViewTransition()

El método document.startViewTransition() nos permite realizar transiciones en acciones específicas, sin necesidad de navegar a una nueva página. Para ello, debemos pasarle por parámetro una función que realiza las tareas correspondientes.

Por otro lado, también tenemos la función document.skipTransition(), que podemos ejecutar si en alguna parte de nuestro código queremos descartar la transición y que no la realice.

Estructura de página

Veamos un ejemplo. En nuestro caso, imaginemos la siguiente estructura HTML, de momento sin ninguna interactividad:

<div class="container">
  <div class="start element"></div>
  <div class="end element"></div>
</div>

.container {
  display: flex;
  justify-content: space-between;
  background: grey;
  height: 250px;
}

.start { background: indigo; }
.end { background: deeppink; }

.element {
  width: 150px;
  height: 150px;
  color: white;
  font-size: 1.5rem;
  display: grid;
  place-items: center;
  user-select: none;
}

Estos dos elementos .element se situarán a lo largo del .container, uno en cada extremo. La idea es que cuando se pulse en el elemento .start (izquierda) ejecutemos una función que realizará tarea en el DOM. En este caso, alternará las clases .start y .end, colocando los elementos en sus extremos contrarios.

Cambios en el DOM

Implementemos dicha función. Observa el código Javascript:

const firstElement = document.querySelector(".start");
const secondElement = document.querySelector(".end");

firstElement.addEventListener("click", () => {
  firstElement.classList.toggle("end");
  firstElement.classList.toggle("start");
  secondElement.classList.toggle("start");
  secondElement.classList.toggle("end");
});

<div class="container">
  <div class="start element">¡Púlsame!</div>
  <div class="end element"></div>
</div>

.container {
  display: flex;
  justify-content: space-between;
  background: grey;
  height: 250px;
}

.start { background: indigo; }
.end { background: deeppink; }

.element {
  width: 150px;
  height: 150px;
  color: white;
  font-size: 1.5rem;
  display: grid;
  place-items: center;
  user-select: none;
}

• En primer lugar, obtenemos el primer elemento firstElement y el último elemento secondElement.
• Al pulsar sobre firstElement, intercambiamos las clases de los dos elementos.
• Si tienen start, cambiamos a end, y viceversa.

Como se puede ver en la demo, el cambio es instantáneo, sin producirse ninguna animación, sino realizando el cambio de repente.

Añadiendo View Transitions

Ahora, vamos a añadir nuestras View Transitions. Para ello, en primer lugar, observa que en el evento click, en lugar de ejecutar directamente la función (como antes), ahora lo que hacemos es llamar a la función document.startViewTransition(). A dicha función, por parámetro, le pasamos otra función que contiene el código que ejecutabamos antes.

Esto lo que hará es iniciar una View Transition, de modo que se toma la «foto» inicial antes, y se cambia a lo que ocurre cuando termina de ejecutarse la función. Además, en nuestro código CSS, añadiremos una propiedad view-transition-name a cada elemento, para indicarle que elementos debe transicionar.

Echemos un vistazo a la demo, para ver como ha quedado:

const firstElement = document.querySelector(".start");
const secondElement = document.querySelector(".end");

firstElement.addEventListener("click", () => {
  document.startViewTransition(() => {
    firstElement.classList.toggle("end");
    firstElement.classList.toggle("start");
    secondElement.classList.toggle("start");
    secondElement.classList.toggle("end");
  });
});

.container {
  display: flex;
  justify-content: space-between;
  background: grey;
  height: 250px;
}

.start {
  view-transition-name: start;
  background: indigo;
}
.end {
  view-transition-name: end;
  background: deeppink;
}

.element {
  width: 150px;
  height: 150px;
  color: white;
  font-size: 1.5rem;
  display: grid;
  place-items: center;
  user-select: none;
}

<div class="container">
  <div class="start element">¡Púlsame!</div>
  <div class="end element"></div>
</div>

¡Observa que la transición se produce de forma suave y sin saltos o cambios repentinos! En este caso lo hemos hecho con un movimiento, ¡pero la personalización corre a cargo del desarrollador! Si prefieres efectos de visibilidad u opacidad, transformaciones de rotación o escala, u otros diferentes, ¡sólo tienes que implementarlos!