如何在Svelte中实现高度为100vh的移动端菜单下滑展开动画？

嘿，我一眼就看出问题在哪啦——你只给了展开状态的高度，但没设置默认状态的样式和过渡属性，CSS动画自然没法触发！咱们一步步来改：

核心问题分析 #

CSS过渡需要明确的起始和结束状态，你现在只定义了.menu-mobile-content.open的height: 100vh，但默认状态下这个容器的height是多少？浏览器不知道从哪过渡到哪，所以动画直接跳过了。另外，得加上transition属性告诉浏览器要执行动画。

具体修改方案 #

1. 完善CSS样式（基础版）

给.menu-mobile-content加上默认状态的样式和过渡效果：

.menu-mobile-content {
  /* 默认收起状态 */
  height: 0;
  overflow: hidden; /* 隐藏超出容器的内容，不然收起时列表会露出来 */
  /* 定义过渡动画 */
  transition: height 0.3s ease;
}

.menu-mobile-content.open {
  height: 100vh;
}

2. （可选）更灵活的自适应方案

如果你的导航内容高度不一定是满屏，用max-height代替height会更合适——这样容器会自适应内容高度，同时保留动画效果：

.menu-mobile-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.menu-mobile-content.open {
  /* 设置一个足够大的值，确保能容纳所有内容 */
  max-height: 100vh;
}

3. 确认Svelte逻辑没问题

你的Svelte脚本和类绑定是正确的，class:open={open}能正确切换类名，不需要改动：

<script>
  let open = false;
  function setBurgerOpen() { open = !open; }
</script>

<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>
      <li>首页</li>
      <li>关于我们</li>
      <li>联系方式</li>
    </ul>
  </div>
</div>

这样改完之后，点击汉堡按钮，导航容器就会平滑地在0.3秒内下滑展开啦！

内容的提问来源于stack exchange，提问作者DedicatedDreamer