React搭配styled-components下拉菜单保留动画同时消除隐藏空白

你遇到的空白问题是因为当前DropMenuWrapper仅通过opacity控制显隐，元素透明状态下仍然占据文档流高度。直接使用display: none会跳过过渡动画，你可以通过新增height（或max-height）+ overflow: hidden的组合实现既无残留空白、又保留过渡动画的效果。

代码修改示例 #

仅需要调整DropMenuWrapper的样式定义即可：

const DropMenuWrapper = styled.div<{ visible: boolean }>`
  transition: all 0.2s ease;
  opacity: ${(props) => (props.visible ? 1 : 0)};
  /* 两个Item总高为80px，隐藏时高度设为0 */
  height: ${(props) => (props.visible ? "80px" : "0")};
  overflow: hidden;
  /* 可选：增加位移动效，让展开收起更自然 */
  transform: ${props => props.visible ? "translateY(0)" : "translateY(-6px)"};
`;

适配动态内容高度的优化方案 #

如果后续下拉项的数量/高度可能变化，不想写死固定高度，可以改用max-height实现适配：

const DropMenuWrapper = styled.div<{ visible: boolean }>`
  transition: all 0.2s ease;
  opacity: ${(props) => (props.visible ? 1 : 0)};
  /* 设置一个远大于预期内容高度的数值即可 */
  max-height: ${(props) => (props.visible ? "200px" : "0")};
  overflow: hidden;
`;

修改完成后展开收起的透明度动画会保留，收起后高度为0不会残留空白，也不需要调整其他业务逻辑。

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