Alpine JS

Con las siguientes etiquetas pueden animar la transición del toggle del navbar.
Estas etiquetas van en donde tienen la propiedad x-show=‘open’ .

x-transition:enter="transition ease-linear duration-300"
x-transition:enter-start="opacity-0 transform -translate-y-4"
x-transition:enter-end="opacity-100 transform translate-y-0"
x-transition:leave="transition ease-linear duration-300"
x-transition:leave-start="opacity-100 transform translate-y-0"
x-transition:leave-end="opacity-0 transform -translate-y-4"

En la etiqueta x-transition:enter van todas las propiedades de la duración de la animación de entrada
En la etiqueta x-transition:enter-star van todas las propiedades iniciales de estilos de la etiqueta, algo así como como el “frame 0”% de la entrada
En la etiqueta x-transition:enter-end van todas las propiedades finales de estilos de la etiqueta, algo así como como el “frame 100%” de la entrada
.
.
En la etiqueta x-transition:leave van todas las propiedades de la duración de la animación de salida
En la etiqueta x-transition:leave-start van todas las propiedades iniciales de estilos de la etiqueta, algo asi como como el “frame 0”% de la salida
En la etiqueta x-transition:leave-end van todas las propiedades finales de estilos de la etiqueta, algo así como como el “frame 100%” de la salida

Un pequeño aporte, pueden usar ‘sticky’ en vez de ‘fixed’, logramos el efecto deseado de que se mantenga arriba mientras se hace scroll, pero sin sacarlo del DOM, cosa que si hace ‘fixed’. Entonces así, solo se posiciona encima del banner cuando se hace scroll, pero no en su posición inicial.

Es mejor usar sticky que fixed ya que con sticky se respeta el espacio de la imagen del restaurante siempre, estando abierto o cerrado el menú. Se utilizaría así:

class="sticky top-0 z-10 w-full ..."

Me encantan las herramientas adicionales que se aprenden en los cursos de Platzi! 💚

CDN:

<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>

A los filtros le puedes agregar mas parametros al metodo x-show para que la transicion sea mas suave:

x-show.transition.duration.600ms="open"

Por detrás show sin mas parametros anade un toggle con display block y display none, mientras que con mas paremetros agregar algunas transiciones. documentacion de x-show:

Para este caso es excelente poner

cursor-pointer

Sobre el ícono de la hamburguesa para dar a entender que se puede hacer click sobre ella.

Excelente bonus! Lo aplicaré de ahora en adelante en todas las Landing Pages que haga para practicar

Así logré qué me funcionará con la versión 3.7.1 de alpine.js:

<nav x-data="{ isOpen: false }" class="fixed z-10 w-full bg-secondary text-gray-100">
    <div class="px-2 bg-secondary text-white flex justify-between items-center">
        <div>
            <img class="h-8 py-1" src="img/logo-w.svg" alt="PlatziFood">
        </div>
        <div class="text-2xl cursor-pointer" x-on:click="isOpen = true">&equiv;</div>
    </div>

    <div x-show="isOpen" @click.outside="isOpen = false">
        <div class="my-1 mx-2">
            <input class="form-control" type="search" placeholder="Búsqueda" />
        </div>

        <div class="py-1 mx-2 md:flex justify-around">
            <div class="flex">
                Precio:
                <div class="ml-2">$</div>
                <div class="ml-2 text-primary">$$</div>
                <div class="ml-2">$$$</div>
                <div class="ml-2">$$$$</div>
            </div>

            <div class="flex">
                <div>
                    Calificación:
                </div>
                <div class="ml-2 text-primary">&starf;</div>
                <div class="ml-px text-primary">&starf;</div>
                <div class="ml-px text-primary">&starf;</div>
                <div class="ml-px text-primary">&starf;</div>
                <div class="ml-px">&star;</div>
            </div>
            <div>
                <button class="btn btn-primary">Filtrar</button>
            </div>
        </div>
    </div>
</nav>

WOW! Me sorprendió mucho esta clase y la facilidad para hacer un navbar, he estado haciendolos con puro CSS y me confundia mucho y con Alpine JS y Tailwind todo ha sido MUUUUY fácil

<script src=“https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js” defer></script>

Para ahorita que ya se actualizó toda la documentación de Tailwind 2021 solo se pone de la siguiente manera:

x-show="open" x-transition.duration.400ms

Aquí esta el source del CDN

“https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.js” defer

@click=“open = true”

Que sueño de profe 😕

https://github.com/alpinejs/alpine

genial alpine JS 😄

“El tailwind de javascript”

Bien una herramienta muy útil, sin embargo en otros Frameworks esto ya se hace automático, pero igual son características de preferencias…

😮 Genial a practicar con esta libreria

f