transition不能直接控制“加载中”状态显隐，必须配合visibility+opacity+transform才能平滑过渡；display不可插值，单独使用会导致动画失效或跳变。
transition 不能直接控制“加载中”这类状态切换的显隐逻辑，必须配合 visibility + opacity + transform 才能真正平滑过渡；单纯用 display: none / block 或 visibility: hidden / visible 单独切换，动画会失效或跳变。
为什么 loading 状态切出来就闪一下？
常见错误是把 transition 写在 .loading:hover 或 .loading.active 里，或者只对 display 做过渡——这两者都无效：
-
display是不可插值属性，浏览器根本不计算中间态，写了transition: display 0.3s完全没反应 - 只在激活类里写
transition，初始状态没声明，移出时立刻硬切，没有缓动 - 用
visibility: hidden → visible却没配opacity，结果是“瞬间出现”，不是“淡入”
正确组合：visibility + opacity + transition 写在基础选择器上
要让“加载中”面板从无到有、再消失都平滑，得同时控制三个维度：
- 基础样式必须包含：
visibility: hidden、opacity: 0、transition: visibility 0.2s, opacity 0.2s ease - 激活时覆盖：
visibility: visible和opacity: 1（不能只改一个） - 如果还要位移效果（比如从顶部滑下），加
transform: translateY(-10px)初始态，激活时设为transform: translateY(0)，并把transform也加入transition列表 - 别用
height或max-height过渡：内容高度不确定时，max-height: 0 → 200px会卡顿或撑开布局
JS 控制 class 切换时容易漏掉的关键点
哪怕 CSS 写对了，JS 层操作不当也会导致动画断层：
立即学习“前端免费学习笔记（深入）”；
- 不要用
element.style.display = 'block'直接改内联样式——这会覆盖 CSS 中的transition声明 - 切换类名后，别立刻读取
offsetHeight或调用getBoundingClientRect()，会强制同步回流，打断动画帧 - 如果 loading 状态由异步请求触发，确保 class 切换发生在请求发起前（比如点击按钮时立即加 loading 类），而不是等
fetch().then()里才加——否则用户感知延迟明显 - 禁用按钮时，建议同时加
pointer-events: none和opacity: 0.6，但要把这两个属性也纳入transition，否则禁用态出现得生硬
最常被忽略的是：transition 生效的前提，是「两个状态的值都可计算且存在中间态」。loading 面板从无到有，本质不是“显示/隐藏”的二元开关，而是视觉层的渐进呈现——所以必须用 opacity + visibility 组合，而不是靠 display 或 visibility 单独扛。
