display:none无法触发transition动画，因其为离散属性，浏览器无法插值；应改用top、opacity或transform等连续属性实现过渡效果。
直接用 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 控制显隐位置。
- 初始状态设为
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); }
滚动方向判断 + 过渡配合要点
单纯 CSS 无法感知滚动方向，必须靠 JS 判断“向下/向上”，再动态加/删 .hidden 类。但容易忽略几个关键点：
- 滚动事件高频触发，务必节流（如
requestAnimationFrame或 50ms throttle） - 首次进入页面时，header 应默认显示，不要等第一次 scroll 才初始化状态
- 用户快速来回滚动时，可能出现“刚隐藏又显示”的抖动，建议加最小滚动阈值（如
deltaY > 5才响应） - 移动端 touchmove 也要监听，不能只靠
scroll（iOS Safari 滚动时可能不触发 scroll 事件）
最易被忽略的是：transition 声明的位置和触发时机。很多人把 transition 写在 .hidden 里，结果动画根本不起作用——它必须挂在常态 class 上，且元素得始终在渲染树中。否则，display 切换或 DOM 移除都会中断动画流程。
