Animación entre vistas

Aprende a animar la transición entre dos vistas en tus apps.

A menudo, quieres llevar a los usuarios de una vista a la otra dentro de tu aplicación, ya sea desde una vista de lista a una de detalles, o bien para mostrar una barra lateral de navegación. Las animaciones entre estas vistas mantienen la atención del usuario y agregan incluso más vida a tus proyectos.

• Usa transiciones para desplazarte entre las vistas. Evita usar left, top o cualquier otra propiedad que desencadene el diseño.
• Asegúrate de que las animaciones que uses sean ingeniosas y breves.
• Ten en cuenta cómo cambian tus animaciones y 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.

La forma en la que estas vistas se ven y se comportan 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.

Cómo usar traducciones para desplazarse por las diferentes vistas

Para facilitar las cosas, supongamos que hay dos vistas: una vista de lista y una de detalles. Cuando el usuario presiona un elemento de la lista que se encuentra dentro de la vista de lista, aparece la vista de detalles y desaparece la vista de lista.

Si quieres lograr este efecto, necesitas un contenedor para ambas vistas que tenga el elemento overflow: hidden configurado. De esa manera, las dos vistas pueden estar dentro del contenedor una al lado de la otra sin mostrar barras de desplazamiento horizontales, y cada vista se puede deslizar de lado a lado dentro del contenedor según sea necesario.

El CSS para el contenedor es el siguiente:

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

La posición del contenedor se establece en relative. Esto significa que cada vista que se encuentre dentro de él puede posicionarse de manera absoluta en la esquina superior izquierda y, luego, moverse de un lado a otro mediante transformaciones. Este enfoque es mejor para el rendimiento que usar la propiedad left (ya que 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;
}

Si se agrega un transition en la propiedad transform, se logra un efecto de deslizamiento atractivo. Para darle una sensación agradable, se usa una curva cubic-bezier personalizada, que mencionamos 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 no se muestra en la pantalla se debe desplazar hacia la derecha, por lo cual en este caso es necesario mover la vista de detalles:

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

Ahora se necesita una pequeña cantidad de JavaScript para manejar las clases. Esto hará que se alternen 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 seguirá siendo el mismo; cada vista no visible debe estar fuera de la pantalla y aparecer cuando sea necesario, y la pantalla que se muestra actualmente debe dejar de visualizarse.

Además de usarse para transiciones 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 tu animación funcione bien en pantallas más grandes

En el caso de las pantallas más grandes, deberías mantener cerca la vista de lista todo el tiempo (en lugar de retirarla) y deslizar la vista de detalles hacia adentro desde la derecha. Es prácticamente lo mismo que usar una vista de navegación.