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

Posted 2023-03-21

【中文标题】如何向下滑动高度为 100vh 的移动菜单？

【英文标题】：How do I slide down a mobile menu with height 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内向下滑动

【参考方案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。