flex-direction设为column时下拉菜单transition失效求助

问题根源 #

你给下拉菜单设置的展开高度是height: 100%，但在媒体查询切换为flex-direction: column后，父容器.link-container没有明确的固定高度，此时100%会被浏览器解析为auto（自适应内容高度）。而CSS过渡无法在0px和auto之间生效——过渡要求起始和结束值都是可计算的具体数值，auto不满足这个条件，所以动画失效。

两种可行解决方案 #

方案一：用固定高度（适合内容高度固定的场景）

你已经在:root里定义了--heightDropdown: 250px，直接把JS里设置高度的逻辑改成使用这个固定值即可：

// 替换原JS中设置高度的两行代码
// 收起时
dropMenu[index].style.height = "0px";
// 展开时
dropMenu[index].style.height = "var(--heightDropdown)";

方案二：用max-height替代height（更灵活，适配内容高度变化）

这种方法不需要固定高度，适合下拉菜单内容不固定的情况：

1. 修改CSS中.link-dropdown的样式：

.link-dropdown {
  background-color: white;
  box-shadow: 0 3px 7px 2px rgba(0, 0, 0, 0.1);
  padding: 0px 10px;
  max-height: 0; /* 替换原来的height:0 */
  overflow: hidden;
  transition: max-height 0.2s ease; /* 过渡属性改为max-height */
}

2. 修改JS中设置高度的逻辑，改为操作max-height：

// 收起时
dropMenu[index].style.maxHeight = "0px";
// 展开时
dropMenu[index].style.maxHeight = "500px"; /* 设置一个足够大的值，大于内容实际高度即可 */

修改后验证 #

两种方案都能保证在flex-direction: row和column布局下，下拉菜单的过渡动画正常生效。建议根据你的内容实际情况选择：如果下拉菜单内容高度固定，用方案一更精准；如果内容高度可能变化，方案二更灵活。

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