Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso de Tailwind CSS 2020

Curso de Tailwind CSS 2020

Víctor Yoalli Domínguez

Víctor Yoalli Domínguez

Alpine JS

27/29
Recursos

Aportes 19

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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.

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

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 ..."

CDN:

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

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

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:

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>

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”

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