En esta clase, veremos cómo recrear una funcionalidad similar a la del menú y mapa de Airbnb, donde los elementos aparecen o desaparecen al hacer scroll. En lugar de replicar exactamente el comportamiento de Airbnb, exploraremos una alternativa donde el mapa aparecerá primero y, posteriormente, el menú, al desplazarnos por la página. Esto nos permitirá comprender los conceptos clave de Tailwind CSS y Alpine.js para crear este tipo de interacciones.

Configuración Inicial

Para gestionar la aparición de estos elementos, utilizaremos x-data dentro del body del documento. Crearemos dos estados separados, uno para el mapa y otro para el menú. Aunque podrían funcionar juntos, los separamos para demostrar cómo podemos controlar su aparición en diferentes puntos de scroll: el mapa aparecerá después de 200 píxeles de scroll, y el menú después de 400 píxeles.

Animación del Mapa

Para el mapa, aplicaremos una transición de Alpine.js. La animación comenzará con una opacidad del 0% y una escala del 90%, y finalizará con una opacidad del 100% y una escala del 100%. Esto significa que el mapa aparecerá gradualmente, aumentando su tamaño desde un 90% hasta su tamaño real. Al desaparecer, la animación se invertirá, volviendo de una escala del 100% a una del 90%. La duración de estas transiciones se puede ajustar para controlar la velocidad de aparición y desaparición.

Animación del Menú

En el caso del menú, utilizaremos un enfoque diferente. En lugar de cambiar la escala, el menú se moverá verticalmente. Comenzará con una posición y-20 (fuera de la vista, en la parte inferior) y se moverá a una posición y-0 (su posición normal) al aparecer. Al desaparecer, el menú se moverá desde su posición normal (y-0) hacia abajo (y-20). Esto creará un efecto de deslizamiento vertical.

Personalización de las Transiciones

Veremos cómo modificar la duración de las transiciones para lograr diferentes efectos visuales. Por ejemplo, podemos hacer que un elemento entre muy rápido y salga más despacio, o viceversa. Esto nos permite un control preciso sobre la experiencia del usuario.

Integración con Tailwind CSS

Todas las clases de estilo que utilizaremos para definir la apariencia de los elementos, como la opacidad, la escala y las transformaciones de posición, serán clases de Tailwind CSS. Alpine.js se encargará de gestionar el comportamiento dinámico y las transiciones, mientras que Tailwind CSS se encargará de los estilos.