Tengo el siguiente código en svelte.
Cuando hago clic en la hamburguesa (css omitido), se abre el contenedor de navegación.
Quiero que el contenedor se deslice hacia abajo en 0,3 s. ¿Cómo puedo hacer eso?
Probé un par de cosas pero, por desgracia, no hubo diferencia.
let open = false; function setBurgerOpen() { open = !open; } .menu-mobile-content.open { height: 100vh; } <div class="navbar-mobile"> <div class="logo">LOGO</div> <div class="menu-btn" on:click={setBurgerOpen} class:open={open}> <div class="menu-btn-burger"></div> </div> <div class="menu-mobile-content" class:open={open}> <ul>...</ul> </div> </div>Usa este código.
Este código traducirá su menú hacia abajo.
.menu-mobile-content { height: 100vh; transform: translateY(-100%); transition: all .3s ease; } .menu-mobile-content.open { transform: translateY(0); }La "manera" de Svelte sería usar un {#if ...} y transiciones en lugar de manipular estilos:
<script> import { slide } from 'svelte/transition' import { cubicInOut } from 'svelte/easing' let open = false; function setBurgerOpen() { open = !open; } </script> <style> .menu-btn { cursor: pointer; } .menu-mobile-content { height: 100vh; background-color: pink; } </style> <div class="navbar-mobile"> <div class="logo">LOGO</div> <div class="menu-btn" on:click={setBurgerOpen}> <div class="menu-btn-burger">{open ? "hide" : "show"}</div> </div> {#if open} <div transition:slide="{{delay: 250, duration: 300, easing: cubicInOut }}" class="menu-mobile-content" > content </div> {/if} </div>Vea esta demostración REPL usando el código anterior.