纯CSS淡入淡出需明确起止状态：opacity必须设初始值，transition须指定opacity而非all，配合visibility实现平滑过渡；display:none不支持过渡，需用JavaScript在transitionend后手动设置。
纯 CSS 就能实现淡入淡出，关键不是“有没有动画”，而是浏览器能不能明确知道“从哪变到哪”——opacity必须有初始值，transition必须写全属性名，否则动画根本不会启动。
为什么 transition: all 0.3s 常常失效
浏览器会把所有可动画属性都纳入过渡范围，比如意外触发的 color、border 或 transform 变化，导致动画“抽搐”或延迟启动；更严重的是：首次显示时若没设 opacity 初始值，all 根本找不到“从哪开始变”。
-
transition必须写成transition: opacity 0.3s ease;，不能省略属性名 - 初始状态（非
:hover或.show）里必须显式声明opacity: 0; - 如果同时用了
visibility: hidden，transition里也得加上它，否则淡出后visibility会瞬间生效，中断opacity过渡
visibility: hidden 和 display: none 怎么选
visibility: hidden 保留布局空间但不可见、不可交互，适合配合 opacity 做平滑过渡；display: none 完全脱离文档流，但不支持任何过渡——写了 transition: display 0.3s 也没用，浏览器直接跳过。
- 淡入淡出过程中，用
visibility: visible/hidden配合opacity是最稳妥的组合 - 想淡出后彻底释放空间？不要在
transition里碰display，而是监听transitionend事件，在opacity到 0 后手动设display: none - 如果元素本身需要响应点击，记得加
pointer-events: none在隐藏态，避免透明但可点
JS 控制时为什么动画不触发或卡顿
常见错误是 JS 直接赋值 el.style.opacity = 0 后立刻赋 el.style.opacity = 1，浏览器会合并渲染，跳过中间帧，结果就是瞬时切换。
立即学习“前端免费学习笔记（深入）”；
- 最轻量解法：强制重排，插一句
el.offsetHeight，让浏览器先读取当前样式再执行下一步 - 更推荐做法：用 class 切换，比如先
el.classList.remove('show')，再setTimeout(() => el.classList.add('show'), 0) - 监听完成用
transitionend，注意它可能被多次触发（比如同时过渡opacity和visibility），要检查event.propertyName === 'opacity'
真正容易被忽略的不是怎么写动画，而是“什么时候算结束”——opacity 到 0 后，visibility: hidden 是否已生效？pointer-events 是否已关闭？这些状态不同步，就可能出现点击穿透或布局残留。动手前先想清楚：你到底要“视觉隐藏”，还是“彻底移除”。
