CSS元素跳动主因是display与transition混用——display为离散属性无法插值，切换时强制重绘并中断过渡；应改用visibility+opacity、height+overflow或transform+opacity等可过渡属性组合实现平滑显隐。
CSS元素突然跳动，通常是因为 transition 与 display 混用导致的渲染断层——display 是离散属性（如 none ↔ block），浏览器无法插值过渡，一设即变，跳过整个动画过程。
display 变化会直接中断 transition
哪怕你给 opacity、transform 写了 transition，只要同时修改 display: none → block（或反向），浏览器会在 display 切换瞬间强制重绘，跳过所有过渡效果，造成“闪一下”或“突兀出现/消失”。
-
display: none时元素完全脱离文档流，不参与渲染，transition 根本无从开始 -
display切换是 layout 触发行为，而大多数可过渡属性（如opacity）依赖于元素已存在且可见 - 常见误写：
transition: all 0.3s;+display: none;→ 实际只有 opacity/transform 等生效，display 自己“啪”地切换
替代 display 的平滑方案
想实现“隐藏→淡入”或“缩放展开”，应避开 display，改用支持过渡的属性组合：
-
用
visibility+opacity：保持布局占位，visibility: hidden配合opacity: 0，再过渡opacity；显示时先设visibility: visible（无过渡），再触发opacity: 1过渡 -
用
height+overflow: hidden：适合下拉菜单等。初始height: 0; overflow: hidden;，过渡height（需设定具体目标值，不能用auto） -
用
transform: scale(0)+opacity：更性能友好，避免重排；隐藏时transform: scale(0); opacity: 0;，显示时过渡两者
transition 不生效的隐藏陷阱
即使没动 display，也可能因属性关系“看起来像跳动”：
立即学习“前端免费学习笔记（深入）”；
-
transition写在被隐藏状态（如.box.hidden { transition: opacity 0.3s; }），但 class 是 JS 同步添加的，浏览器来不及“记住旧态”就直接渲染新态 → 解决：加setTimeout(() => el.classList.toggle('hidden'), 0)或用getComputedStyle强制 reflow - 过渡属性未在初始/目标状态中**显式声明值**（例如只在 hover 中写
transform: scale(1.2)，但默认态没设transform: scale(1)）→ 浏览器从none插值，结果异常 - 父容器有
overflow: hidden，而子元素过渡中transform超出范围，被裁切后“像跳了”——实际是渲染裁剪时机问题
推荐的安全切换模式（JS + CSS）
结构清晰、可预测、不跳动：
- CSS 中定义两个状态类：
.fade-enter（opacity: 0; transform: translateY(10px);）和.fade-enter-active（transition: opacity 0.3s, transform 0.3s;） - JS 添加元素后，先加 enter 类，下一帧再加 active 类（用
requestAnimationFrame或setTimeout(..., 0)） - 隐藏时同理：先移除 active，再移除 enter（或用
transitionend事件清理）
基本上就这些。核心就一条：display 和 transition 天然不兼容，想动得顺，就得绕开它——用 visibility/opacity、transform 或 height 配合 overflow 来模拟“显示/隐藏”，再把 transition 绑在真正可插值的属性上。
