React自定义下拉菜单：容器高度随列表显隐调整并支持过渡动画

你的核心问题出在用了position:absolute让列表脱离文档流，以及**scaleY只是视觉缩放不改变元素占位**，导致容器无法感知列表的显隐状态来调整高度。下面给你两种可行的方案：

方案一：用max-height + overflow:hidden实现基础动画 #

这种方式简单直接，适合固定或可预估高度的列表：

修改后的CSS #

.db-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* 可选：加边框方便观察容器高度变化 */
  border: 1px solid #e0e0e0;
  width: 200px;
}

.db-name {
  cursor: pointer;
  margin: 0;
  padding: 10px;
  background-color: #f5f5f5;
}

.db-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0; /* 默认隐藏，高度为0 */
  overflow: hidden; /* 超出部分隐藏 */
  transition: max-height 0.3s ease; /* 高度变化动画 */
  background-color: #fff;
}

/* 列表显示时的状态 */
.db-list.visible {
  max-height: 200px; /* 设一个大于列表实际高度的值，确保完全展开 */
}

.db-list li {
  padding: 10px;
  cursor: pointer;
}

.db-list li:hover {
  background-color: #f0f0f0;
}

修改后的React JSX #

<div className='db-container'>
  <h3 className='db-name' onClick={handleClick}>Heading</h3>
  {/* 用条件类名替代原来的visible-${isVisible} */}
  <ul className={`db-list ${isVisible ? 'visible' : ''}`}>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
  </ul>
</div>

方案二：动态获取列表实际高度（适配任意长度列表） #

如果列表长度不固定，硬写max-height可能不够灵活，可以用React的useRef获取列表真实高度：

组件代码修改 #

import { useRef, useEffect } from 'react';

// 组件内部
const listRef = useRef(null);

// 监听isVisible变化，动态设置max-height
useEffect(() => {
  if (listRef.current) {
    // 显示时设为列表实际滚动高度，隐藏时设为0
    listRef.current.style.maxHeight = isVisible 
      ? `${listRef.current.scrollHeight}px` 
      : '0';
  }
}, [isVisible]);

// JSX部分
<div className='db-container'>
  <h3 className='db-name' onClick={handleClick}>Heading</h3>
  <ul ref={listRef} className='db-list'>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
  </ul>
</div>

对应CSS（去掉.visible类的max-height） #

.db-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background-color: #fff;
}

为什么这两种方案有效？ #

• 去掉了position:absolute，让列表留在文档流中，容器会自动计算列表的高度并跟随变化。
• max-height的过渡动画是浏览器原生支持的，能实现平滑的高度展开/收起效果。
• 方案二通过scrollHeight获取列表真实高度，避免了硬写数值的局限性，适配所有长度的列表。

内容的提问来源于stack exchange，提问作者Prof.Chewbacca