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

【问题标题】：How do I slide down a mobile menu with height 100vh?如何向下滑动高度为 100vh 的移动菜单？
【发布时间】：2021-12-06 08:47:53
【问题描述】：

我在 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>

【问题讨论】：

使用transition在0.3s内向下滑动

标签： javascript html css svelte slide

【解决方案1】：

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

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

【讨论】：

这使得 vh 总是 100，所以我的整个屏幕总是被菜单填满
transform: translateY(-100%) 会将菜单移到顶部，并且看不到菜单。

【解决方案2】：

Svelte 的“方式”是使用 an {#if ...} block 和 transitions 而不是操纵样式：

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

使用上面的代码查看this demo REPL。

【讨论】：