Animación entre vistas

Aprende a animar entre dos vistas en tus apps.

Con frecuencia, querrás mover a los usuarios entre las vistas de tu aplicación, ya sea de una vista de lista a una de detalles, o mostrar una barra lateral de navegación. Las animaciones entre estas vistas mantienen la atención del usuario y agregan aún más vida a tus proyectos.

• Usa traducciones para moverte entre vistas. Evita usar left, top o cualquier otra propiedad que active el diseño.
• Asegúrate de que las animaciones que uses sean rápidas y de corta duración.
• Ten en cuenta cómo cambian las animaciones y los diseños a medida que aumentan los tamaños de las pantallas; lo que funciona para una pantalla más pequeña puede verse extraño en un contexto de escritorio.

El aspecto y el comportamiento de estas transiciones de vistas depende del tipo de vistas con el que trabajes. Por ejemplo, animar una superposición modal sobre una vista debería ser una experiencia diferente a la transición entre una vista de lista y una de detalles.

Usa traducciones para desplazarte por las vistas

Para facilitar el proceso, imagina que hay dos vistas: una de lista y otra de detalles. A medida que el usuario presiona un elemento de la lista dentro de la vista de lista, se desliza la vista de detalles y desaparece la vista de lista.

A fin de lograr este efecto, necesitas un contenedor para ambas vistas que tenga el parámetro overflow: hidden configurado. De esta manera, las dos vistas pueden estar dentro del contenedor, una al lado de la otra, sin mostrar ninguna barra de desplazamiento horizontal, y cada vista se puede deslizar de lado a lado dentro del contenedor según sea necesario.

El CSS del contenedor es el siguiente:

.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

La posición del contenedor se establece como relative. Esto significa que cada vista que se encuentre dentro de él se puede posicionar absolutamente en la esquina superior izquierda y, luego, moverse de un lado a otro con transformaciones. Este enfoque es mejor para el rendimiento que el uso de la propiedad left (porque esa propiedad activa el diseño y la pintura) y, por lo general, es más fácil de racionalizar.

.view {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;

  /* let the browser know we plan to animate
     each view in and out */
  will-change: transform;
}

Agregar un elemento transition en la propiedad transform proporciona un efecto de deslizamiento agradable. Para lograr una sensación agradable, utiliza una curva cubic-bezier personalizada, de la que hablamos en la guía de Aceleración personalizada.

.view {
  transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

La vista que está fuera de la pantalla se debe trasladar hacia la derecha, por lo que, en este caso, la vista de detalles debe moverse:

.details-view {
  transform: translateX(100%);
}

Ahora se necesita un poco de JavaScript para controlar las clases. Esto activa o desactiva las clases apropiadas en las vistas.

var container = document.querySelector('.container');
var backButton = document.querySelector('.back-button');
var listItems = document.querySelectorAll('.list-item');

/**
    * Toggles the class on the container so that
    * we choose the correct view.
    */
function onViewChange(evt) {
    container.classList.toggle('view-change');
}

// When you click a list item, bring on the details view.
for (var i = 0; i < listItems.length; i++) {
    listItems[i].addEventListener('click', onViewChange, false);
}

// And switch it back again when you click the back button
backButton.addEventListener('click', onViewChange);

Por último, agregamos las declaraciones de CSS para esas clases.

.view-change .list-view {
  transform: translateX(-100%);
}

.view-change .details-view {
  transform: translateX(0);
}

Probar

Puedes expandir esto para que abarque varias vistas y el concepto básico debería seguir siendo el mismo: cada vista no visible debe estar fuera de la pantalla y activarse cuando sea necesario, y la vista actual en pantalla debe moverse.

Además de la transición entre vistas, esta técnica también se puede aplicar a otros elementos de deslizamiento, como los elementos de navegación de la barra lateral. La única diferencia real es que no deberías tener que mover las otras vistas.

Asegúrate de que la animación funcione bien en pantallas más grandes

En el caso de una pantalla más grande, debes mantener la vista de lista todo el tiempo en lugar de quitarla y deslizarte hacia la vista de detalles desde el lado derecho. Es casi lo mismo que utilizar una vista de navegación.