CSS transition在height:0时失效（其他height值正常）的技术求助

数据老陈

2026-5-29

我明白你的困扰——明明加了transition属性，但Header就是直接消失，完全没有平滑过渡。问题出在类切换时同时改变了元素的定位方式，打断了过渡动画的触发逻辑。

问题根源

你的showHeaderHidden()函数同时做了两件事：

function showHeaderHidden() {
  document.getElementById('header').classList.add('hidden');
  document.getElementById('header').classList.remove('fixed');
}

这会让Header从position: fixed（固定定位）瞬间变回默认的static（正常文档流定位），浏览器在处理定位突变时会直接重新计算布局，跳过了height属性的过渡动画，所以看起来就是Header立刻消失了。

修复方案（推荐）

让Header在隐藏状态下依然保持fixed定位，只改变height属性，这样过渡动画就能正常触发了：

1. 调整CSS规则

把transition统一写在基础的header规则里，避免重复；同时修改hidden类的样式，保留固定定位：

body {
  height: 2000px;
  margin: 0px;
}

header {
  height: 120px;
  background: red;
  transition: all 0.5s ease; /* 统一对所有可动画属性应用过渡 */
}

header.fixed {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 45px;
  background: green;
}

header.hidden {
  position: fixed; /* 保留固定定位 */
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  overflow: hidden; /* 防止Header内的内容溢出（如果有的话） */
}

2. 简化JS中的类切换逻辑

既然hidden状态已经保留了fixed定位，就不需要再移除fixed类了：

function showHeaderHidden() {
  document.getElementById('header').classList.add('hidden');
  // 移除这一行：document.getElementById('header').classList.remove('fixed');
}