javascript - 如何向下滑动高度为 100vh 的移动菜单？

Question

我在 svelte 中有以下代码。

当我单击汉堡（省略 css）时，它会打开导航容器。

我希望容器在 0.3 秒内向下滑动。我怎么做？

我尝试了几件事，但唉，没有区别。

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>

标签： javascripthtmlcsssvelteslide

Answer 1

使用此代码。
此代码将向下翻译您的菜单。

.menu-mobile-content {
    height: 100vh;
    transform: translateY(-100%);
    transition: all .3s ease;
}
.menu-mobile-content.open {
    transform: translateY(0);
}