01 Capítulo 1 · Lección 9

Componentes Reales (Modales)

Redactado por

Author

Fecha de publicación

04/04/2024

Tiempo de lectura

6 min

Tema

CSS Transitions

El arte de aparecer y desaparecer

Hasta ahora hemos visto cómo animar cosas cuando pasamos el cursor o damos focus. Pero el uso más poderoso de las transiciones en el mundo real es gestionar la entrada y salida de componentes como Modales, Tooltips, Dropdowns y Menús Laterales (Sidebars).

El problema de display: none

La intuición inicial de cualquier desarrollador es usar display: none para ocultar un modal y cambiarlo a display: block cuando quiere abrirlo. El problema es que la propiedad display NO es animable. Si la cambias, el navegador ignorará la transición y el elemento aparecerá o desaparecerá de golpe.

La solución profesional: Opacity + Visibility + Transform

Para lograr que un componente aparezca suavemente y no intercepte clics cuando está oculto, usamos este trío dinámico:

✦ opacity: 0 / 1: Controla el desvanecimiento visual.
✦ visibility: hidden / visible: Evita que el elemento oculto pueda ser clickeado o enfocado por el teclado, sin sacarlo del flujo del renderizado.
✦ transform: Controla de dónde proviene el componente (por ejemplo, desde abajo o más pequeño).

Consejo profesional

Al cerrar un modal, asegúrate de que la transición tenga tiempo suficiente para completarse antes de que cualquier script JS remueva el elemento del DOM.

Ejemplo práctico

> _

<div class="modal-container">
  <button class="toggle-btn" onclick="document.getElementById('modal').classList.toggle('active')">
    Abrir Modal
  </button>
</div>

<!-- El modal existe en el DOM, pero está oculto visualmente -->
<div class="modal-overlay" id="modal">
  <div class="modal-content">
    <h3>¡Hola! Soy un Modal</h3>
    <p>He entrado a escena suavemente escalando desde el centro.</p>
    <button class="close-btn" onclick="document.getElementById('modal').classList.remove('active')">Cerrar</button>
  </div>
</div>

.modal-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 24px;
  background: transparent;
  border: 1px dashed #52525b;
  border-radius: 0;
}

.toggle-btn {
  background: #a855f7;
  color: #0f172a;
  padding: 10px 20px;
  border-radius: 0;
  border: none;
  cursor: pointer;
  font-weight: bold;
  font-family: 'afronaut', serif;
}

/* El Overlay oscurece el fondo */
.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Estados iniciales para la transición */
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
}

/* La ventana del modal */
.modal-content {
  background: #27272a;
  padding: 24px;
  border-radius: 0;
  width: 300px;
  
  /* Empieza pequeño y un poco más abajo */
  transform: scale(0.9) translateY(20px);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.close-btn {
  background: transparent;
  color: #a1a1aa;
  border: 1px solid #52525b;
  padding: 6px 12px;
  border-radius: 0;
  cursor: pointer;
  margin-top: 16px;
  font-family: 'afronaut', serif;
}

.close-btn:hover {
  color: white;
  border-color: white;
}

/* El estado Activo (agregado por JS) */
.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-overlay.active .modal-content {
  transform: scale(1) translateY(0);
}

> _

Haz clic en el botón para alternar el estado del modal. Observa la coreografía: el fondo se oscurece y la tarjeta salta un poco (gracias al cubic-bezier) para llamar tu atención.

Errores comunes

01

Animar display: none display no es animable. Usa opacity + visibility para ocultar componentes sin sacarlos bruscamente de la pantalla.

02

Bloquear clicks con visibilidad Si usas solo opacity: 0, el modal será invisible pero seguirá capturando clics y tapando la página. Usa siempre visibility: hidden junto con opacity.

Practica lo aprendido

Crea componentes robustos que no desaparezcan de la nada.

01 Recuerda que no puedes transicionar display: none.

02 Usa visibility: hidden y opacity: 0 en su lugar.

03 Anima el overlay (fondo) solo con opacidad.

04 Añade un movimiento (transform) al modal para hacerlo más dinámico.

05 Aplica una curva de rebote (cubic-bezier) para que el modal "salte" al abrir.