如何用CSS transition实现固定头部显示隐藏-css教程-PHP中文网

display:none无法触发transition动画，因其为离散属性，浏览器无法插值；应改用top、opacity或transform等连续属性实现过渡效果。

如何用css transition实现固定头部显示隐藏

直接用 transition 控制 display 不生效，必须改用 top、opacity 或 transform 才能触发过渡动画。

为什么 display: none 不能加 transition

display 是离散属性（非连续值），浏览器无法插值计算 none → block 的中间状态，所以写上 transition: display 0.3s 完全无效。实际表现是瞬间切换，毫无动画。

✅ 正确做法：用 top 移动位置（如从 0 到 -80px）
✅ 或用 opacity + pointer-events 搭配（注意可访问性影响）
✅ 或用 transform: translateY()，性能更优，尤其在移动端

用 top 实现固定头部滑入滑出

适用于高度固定的导航栏，比如 height: 60px。核心是让元素始终在 DOM 中、保持 position: fixed，仅靠 top 控制显隐位置。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

初始状态设为 top: 0，显示在顶部
隐藏时设为 top: -60px（负值 = 高度的相反数）
transition 必须写在基础 class 上（不是只写在 .hidden 类里），否则类切换瞬间才加 transition，动画来不及触发

示例 CSS：

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  transition: top 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.header.hidden {
  top: -60px;
}

用 transform 替代 top 更稳妥

top 触发重排（reflow），而 transform 只触发重绘（repaint），尤其在滚动频繁时更流畅。iOS Safari 对 fixed 元素的 top 动画偶有抖动，transform 基本无此问题。

把 top: -60px 换成 transform: translateY(-60px)
初始状态用 transform: translateY(0)
记得同时加 will-change: transform（可选，对长列表页有帮助）

JS 切换 class 逻辑不变，但动画更稳：

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  transform: translateY(0);
  transition: transform 0.4s ease-out;
}
.header.hidden {
  transform: translateY(-60px);
}