Cómo animar vistas modales

Las vistas modales bloquean la interfaz de usuario para mostrar mensajes importantes. Aprende a animar vistas modales en tus apps.

Paul Lewis

Probar

Las vistas modales se usan para mensajes importantes, por lo que tienes muy buenos motivos para bloquear la interfaz de usuario. Úsalas con cuidado, ya que causan interrupciones y pueden arruinar fácilmente la experiencia del usuario si se usan demasiado. Sin embargo, en algunos casos, son las vistas adecuadas y, si se les agrega algún tipo de animación, les darán vida.

• Usa vistas modales con moderación. Los usuarios se frustran si interrumpes su experiencia innecesariamente.
• Cuando se agrega una escala a la animación, se logra un agradable efecto de “aparición”.
• Elimina rápidamente la vista modal cuando el usuario la descarte. Sin embargo, lleva la vista modal a la pantalla un poco más lentamente para que no sorprenda al usuario.

La superposición modal debe estar alineada con el viewport, por lo que debes establecer su position en fixed:

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  pointer-events: none;
  opacity: 0;

  will-change: transform, opacity;
}

Tiene un opacity inicial de 0, por lo que está oculto, pero también debe establecer pointer-events en none para que los clics y los toques pasen. De lo contrario, se bloquearán todas las interacciones y toda la página dejará de responder. Por último, debido a que anima sus opacity y transform, estos deben marcarse como cambiantes con will-change (consulta también Cómo usar la propiedad will-change).

Cuando la vista es visible, debe aceptar interacciones y tener un opacity de 1:

.modal.visible {
  pointer-events: auto;
  opacity: 1;
}

Ahora, cada vez que se requiera la vista modal, podrás usar JavaScript para activar o desactivar la clase “visible”:

modal.classList.add('visible');

En este punto, la vista modal aparece sin ninguna animación, por lo que ahora puedes agregarla (consulta también Aceleración personalizada):

.modal {
  transform: scale(1.15);

  transition:
    transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946),
    opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

Si agregas scale a la transformación, la vista parecerá caer en la pantalla un poco, lo que es un efecto agradable. La transición predeterminada se aplica a las propiedades de transformación y opacidad con una curva personalizada y una duración de 0.1 segundos.

No obstante, la duración es bastante corta, pero es ideal para cuando el usuario descarta la vista y desea volver a tu app. La desventaja es que probablemente sea demasiado agresiva para cuando aparezca la vista modal. Para solucionar este problema, anula los valores de transición para la clase visible:

.modal.visible {
  transform: scale(1);

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

Ahora la vista modal tarda 0.3 segundos en aparecer en la pantalla, lo cual es un poco menos agresivo, pero se descarta rápidamente, algo que el usuario apreciará.