Guías Técnicas

Eventos de Entrada y Salida en HTMX: Cómo Detectar Interacción del Usuario

  HTMX

Cuando trabajas con HTMX, es importante entender la diferencia entre los eventos de entrada y salida, ya que te permiten manejar la interacción del DOM al insertar o eliminar elementos.

HTMX ofrece dos eventos clave al manipular el DOM: entrada y salida, estos eventos te permiten controlar visualmente y lógicamente lo que entra y sale del DOM en tus interacciones con HTMX.

Eventos de Entrada (htmx:afterSwap / htmx:load)

  Eventos de Entrada

Esto ocurre cuando HTMX inserta un nuevo contenido en el DOM.

  • Cuándo: cuando un nuevo contenido se inserta en el DOM.
  • Aplica a: el nuevo elemento (hx-target).
  • Uso común: animaciones de aparición o inicialización de scripts.

Eventos de Salida (htmx:beforeSwap)

  Eventos de Entrada

Ocurre cuando HTMX reemplaza o elimina un contenido del DOM.

  • Cuándo: justo antes de reemplazar o eliminar un contenido.
  • Aplica a: el elemento antiguo que será reemplazado.
  • Uso común: animaciones de salida, limpieza o guardar estado.

✨ Eventos y Clases de Entrada

htmx:afterSwap:

Este evento se dispara después de que HTMX ha insertado el contenido en el DOM, ya sea mediante reemplazo, inserción o adición. Uso común: iniciar animaciones CSS que animen el contenido que aparece, ejecutar scripts o enfocar elementos del nuevo contenido.

Ejemplo:

js 
htmx.on("htmx:afterSwap", (e) => {
  e.detail.target.classList.add("fade-in");
});

Este código escucha el evento htmx:afterSwap y, cuando se dispara, añade la clase fade-in al elemento insertado. Se usa para aplicar una animación o efecto visual al nuevo contenido cargado por HTMX.

css 
.fade-in {
      opacity: 0;
      transform: translateY(10px);
      animation: fadeIn 0.5s ease-out forwards;
  }

  @keyframes fadeIn {
      to {
          opacity: 1;
          transform: translateY(0);
      }
  }

La clase .htmx-added es añadida automáticamente por HTMX a los elementos recién insertados en el DOM. Se usa comúnmente para aplicar estilos o animaciones justo después de que el contenido ha sido agregado.

Ejemplo:

css 
#target.htmx-added {
  opacity: 0;
}
#target {
  transition: opacity 0.5s ease;
  opacity: 1;
}

Eventos y Clases de Salida

htmx:beforeSwap

htmx:beforeSwap es un evento de HTMX que se dispara justo antes de que el contenido recibido del servidor sea insertado en el DOM. Ideal para aplicar filtros, animaciones de salida o cancelar el intercambio.

Ejemplo:

js 
htmx.on("htmx:beforeSwap", (e) => {
      console.log("Contenido antiguo se va a eliminar:", e.detail.target);
  });

.htmx-swapping

.htmx-swapping es una clase CSS que HTMX agrega temporalmente al elemento objetivo (hx-target) justo antes de ser reemplazado o eliminado.

Se usa comúnmente para aplicar animaciones de salida (como desvanecimiento o deslizamiento) antes de que el contenido desaparezca del DOM.

Ejemplo:

css 
.htmx-swapping {
      opacity: 0;
      transform: translateY(-10px);
      transition: opacity 0.4s ease-out, transform 0.4s ease-out;
  }

Recomendación de uso

  Conclusión

  • Usa .htmx-added o htmx:afterSwap para animaciones de entrada (ej: fade-in, slide-in).
  • Usa .htmx-swapping o htmx:beforeSwap para animaciones de salida (ej: fade-out, zoom-out).
  • Las clases CSS permiten una integración sin JavaScript si prefieres un enfoque declarativo.

Ejemplo completo

html 
<!-- Botón que carga contenido con animaciones -->
  <button hx-get="/nuevo" 
      hx-target="#contenido"
      hx-swap="innerHTML swap:300ms settle:300ms
  ">

  Mostrar contenido
  </button>

  <div id="contenido"></div>

En este ejemplo, el botón carga contenido con una animación de entrada y salida.

css 
/* Entrada */
  .fade-in { opacity: 0; animation: fadeIn 0.4s ease forwards; }
  @keyframes fadeIn { to { opacity: 1; } }

  /* Salida */
  .htmx-swapping { opacity: 0; transition: opacity 0.3s ease; }

Aquí, usamos las clases CSS .fade-in y .htmx-swapping para animaciones de entrada y salida.

js 
htmx.on("htmx:afterSwap", (e) => {
      e.detail.target.classList.add("fade-in");
  });

Aquí, usamos el evento htmx:afterSwap para agregar la clase .fade-in al contenido cargado con HTMX.