I have the following code in svelte.
When I click the burger (css omitted) it opens the navigation container.
I want the container to slide down in .3s. How do I do that?
I tried a couple things but alas, no difference.
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>Use this code.
This code will translate your menu down.
.menu-mobile-content {
height: 100vh;
transform: translateY(-100%);
transition: all .3s ease;
}
.menu-mobile-content.open {
transform: translateY(0);
}
The Svelte "way" would be to use an {#if ...} block and transitions instead of manipulating styles:
<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>
See this demo REPL using the code above.