transition: all 0.3s 不行，因浏览器会将所有可动画属性（如 color、border、transform）纳入过渡队列，导致意外变化、“抽搐”或延迟启动；且首次显示时若无初始 opacity，过渡无法确定起始值。
直接用 opacity + transition 就能实现，不需要 JS 也能跑通；但写错一行声明，动画就完全不触发。
为什么 transition: all 0.3s 不行
浏览器会把所有可动画属性都纳入过渡，比如意外触发 color、border 或 transform 的变化，导致动画“抽搐”或延迟启动。更关键的是：首次显示时若没设初始 opacity，all 根本找不到“从哪开始变”。
-
transition必须写全属性名：transition: opacity 0.3s ease; - 初始状态（非
:hover/.show）里必须有opacity: 0; - 隐藏时建议搭配
visibility: hidden;，否则透明元素仍占位、可点击
JS 控制时为什么常“一闪而过”
因为 el.style.opacity = '0'; el.style.opacity = '1'; 被浏览器合并成一次渲染，中间帧被跳过——它根本没机会“动”。
- 最轻量的修复是强制重排：
el.offsetHeight;插在两句之间 - 更推荐操作 class：
el.classList.remove('show');→el.offsetHeight;→el.classList.add('show'); - 批量处理多个元素时，别用
for同步改style，用 CSS 的animation-delay或setTimeout错开起始时间
淡出后怎么安全隐藏并释放空间
很多人同时设 opacity: 0 和 visibility: hidden，结果动画中途卡住——visibility 不支持过渡，一设就立刻生效，opacity 过渡直接中断。
立即学习“前端免费学习笔记（深入）”；
- 正确流程：监听
transitionend事件，等动画结束再设visibility: hidden或display: none -
display: none必须放在事件回调里，不能提前写 - 禁用对
display做transition——它根本不支持动画，写了也白写 - 需要淡出后收起高度？可用
max-height+overflow: hidden，但得预设一个足够大的max-height值
真正容易被忽略的是过渡时长：0.1s 人眼几乎看不出变化，1.2s 又拖慢交互节奏；0.25–0.4s 是多数 UI 场景的舒适区间。还有就是初始 opacity: 0 必须内联在 <head> 中，否则 HTML 解析到样式前已渲染内容，就会“先闪一下再淡入”。
