点击菜单项时Header高度平滑过渡失效问题排查

核心问题 #

1. 动画作用范围错误：你把<Transition name="collapse">套在了整个header外层，但实际需要高度过渡的是下方动态切换的菜单区域，而非整个头部。点击菜单时，动画并未触发在高度变化的目标元素上。
2. 缺失关键基础样式：实现max-height过渡动画时，目标元素必须设置overflow: hidden（隐藏超出部分）和默认的max-height值，否则浏览器无法识别过渡逻辑。
3. 动画与菜单切换未绑定：菜单组件切换导致高度变化，但collapse动画未作用在这个可变高度的容器上，因此看不到过渡效果。

修复后的代码示例 #

Vue 模板调整

将collapse Transition移到动态菜单区域外层，确保只对可变高度部分应用动画：

<div class="header" @mouseleave="closeHeader">
  <div class="header__general">
    <Icon name="logo" color="white" class="header__logo" />

    <div class="header__links">
      <p
        v-for="item of MENU_ITEMS"
        :key="item"
        class="header__link"
        @click="setCurrentMenuItem(item)"
      >
        {{ item }}
      </p>
    </div>

    <SocialIcons color="white" />

    <div class="header__button">
      <Button :text="buttonText" @click="openWalletModal" />
    </div>

    <div class="header__menu" @click="openWalletModal">
      <Icon name="menu" color="white" />
    </div>
  </div>

  <!-- 将折叠动画绑定到动态菜单容器 -->
  <Transition name="collapse" appear>
    <div v-show="isMenuOpen" class="header__menu-container">
      <TransitionGroup name="fade" appear mode="out-in">
        <Component :is="menuComponent" :key="currentMenuItem" />
      </TransitionGroup>
    </div>
  </Transition>
</div>

（注：假设你通过isMenuOpen状态控制菜单显示/隐藏，或根据currentMenuItem值判断菜单是否展开）

SCSS 样式修正

给菜单容器添加基础样式，调整动画参数使其更符合交互体验：

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease-out;
}

/* 菜单容器基础样式，必须设置 */
.header__menu-container {
  overflow: hidden;
  max-height: 1000px; /* 设置足够大的值，覆盖菜单最大可能高度 */
}

.collapse-enter-from,
.collapse-leave-to {
  max-height: 0;
}
.collapse-enter-active,
.collapse-leave-active {
  transition: max-height 0.3s ease-in-out; /* 调整动画时长更流畅 */
}

额外说明 #

• 使用max-height过渡时，默认值要设得比菜单实际最大高度大（比如1000px），确保动画能自然过渡到真实高度。
• 确保isMenuOpen状态与菜单的显示/隐藏逻辑正确关联，点击菜单项时同步更新状态以触发动画。
• 移除了不必要的background: transparent样式，它对高度过渡无影响。

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