Cómo animar la apertura y el cierre de una ventana modal
Cómo animar un diálogo para que parezca unido a su disparador: origen, ritmo del fondo, entrada y salida, interrupción y gestión del foco.
Idea clave
Anima la modal desde el elemento que la abrió, o desde la zona que el usuario estaba mirando, para que el cambio tenga un origen espacial. Desvanece el fondo y mueve el panel con ritmos distintos, haz la salida más rápida que la entrada y mantén la gestión del foco fuera de la animación. Un panel que crece desde el centro de la pantalla se siente genérico.
Empieza desde el disparador
La continuidad espacial es el truco completo. Si una tarjeta abre un diálogo de detalle, el panel puede expandirse desde esa tarjeta; si un botón de la barra abre ajustes, puede surgir cerca de él. Así el usuario sabe de dónde viene la capa nueva y a dónde volverá.
Mueve el fondo y el panel por separado
El fondo suele ser un cambio de opacidad, barato de animar; el panel debe moverse o escalar. Ejecutar ambos con la misma curva hace que toda la pantalla parezca una imagen plana. Un fondo algo retrasado, o que se desvanece más rápido, se lee como profundidad.
- Fondo: solo opacidad
- Panel: transformación y opacidad
- Evita animar el desenfoque en superficies grandes, porque es caro
- Mantén un color sólido de respaldo mientras aparece el fondo
La salida, más rápida que la entrada
El usuario ya sabe qué se cierra, así que la salida no tiene que enseñarle nada. Una salida más corta además le devuelve antes a su tarea. Un patrón habitual es una entrada algo más lenta que muestra la forma del panel y un cierre rápido con desvanecido y reducción.
Haz la transición interrumpible
Si una modal puede abrirse y cerrarse rápido, la animación debe leer el estado actual en lugar de reiniciarse desde cero. Esa es la diferencia entre una transición y una máquina de estados: si el usuario la cierra mientras se abre, el panel debe invertirse desde donde está.
Foco, escape y movimiento reducido
La animación y el foco son trabajos separados. Lleva el foco al diálogo al abrirlo, atrápalo mientras esté abierto y devuélvelo al disparador al cerrar; el patrón de diálogo de WAI-ARIA describe el comportamiento de teclado esperado. Con movimiento reducido, sustituye el desplazamiento por un desvanecido corto.
Errores que abaratan una modal
Escalar desde cero parece un salto, no un movimiento. Un desvanecido largo hace que la aplicación parezca lenta. Animar el desenfoque del fondo en pantallas grandes puede perder fotogramas. Y bloquear el desplazamiento antes de que empiece la animación provoca un salto visible: corrige ese salto primero.
Principios clave para recordar
- Da al panel un origen espacial, preferiblemente el elemento que la abrió
- Anima la opacidad del fondo y la transformación del panel por separado
- Mantén la salida más corta que la entrada
- Si se interrumpe la apertura, invierte desde la posición actual
- La gestión del foco es independiente de la animación y debe seguir funcionando
Preguntas frecuentes
Fuentes
- Dialog (Modal) Pattern — W3C WAI-ARIA Authoring Practices
- Motion — Apple Human Interface Guidelines
- Animation performance and frame rate — web.dev