实现菜单交互时CSS Transition对height属性不生效如何解决

问题核心原因 #

• 过渡不生效的根本原因是：你将展开高度设为height: 100%，但父元素nav没有设置固定高度，浏览器无法计算出百分比高度对应的具体像素值，也就无法生成从60px到百分比高度的过渡动画。
• 另外你当前的CSS只写了:hover触发高度变化，没有对应你JS中切换的.icons.active类的样式，点击逻辑也无法生效。
• 你JS代码中选中的.labels元素在HTML中不存在，运行时会抛出控制台错误。

快速修复方案 #

方案1：使用max-height替代height实现过渡（最快捷） #

不需要计算菜单精确高度，只需要设置一个比菜单实际最大高度更大的值即可，修改后的CSS代码如下：

nav ul.icons {
  background: #fff;
  width: 60px;
  max-height: 60px; /* 替换原height属性，收起状态最大高度为触发按钮高度 */
  height: auto; /* 实际高度由内容自动撑开 */
  overflow: hidden;
  border-radius: 60px;
  transition: 1s ease;
}
/* 删除原:hover规则，添加active类对应样式，匹配JS点击逻辑 */
nav ul.icons.active {
  max-height: 500px; /* 该值只要大于菜单展开后的实际总高度即可 */
}

JS代码同步删除无效的labels操作：

let btn = document.querySelector('.trigger');
let icons = document.querySelector('.icons');
btn.onclick = function() {
  icons.classList.toggle('active');
}

方案2：JS动态计算高度实现更精准的过渡 #

如果需要过渡时长和实际高度完全匹配，可以通过JS读取元素内容高度再做切换，修改代码如下：

let btn = document.querySelector('.trigger');
let icons = document.querySelector('.icons');
// 获取菜单内容实际总高度
const expandHeight = icons.scrollHeight + 'px';
// 初始化收起状态高度
icons.style.height = '60px';

btn.onclick = function() {
  icons.classList.toggle('active');
  icons.style.height = icons.classList.contains('active') ? expandHeight : '60px';
}

对应CSS调整为：

nav ul.icons {
  background: #fff;
  width: 60px;
  overflow: hidden;
  border-radius: 60px;
  transition: height 1s ease; /* 明确指定height为过渡属性 */
}

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