最推荐用css transition控制opacity，js仅触发class切换；需配合visibility避免过渡失效，禁用display；精细控制可用element.animate()但要注意终态设置和兼容性；避免纯js定时器方案。
最推荐的方式是用 CSS transition 控制 opacity，JavaScript 只负责触发状态切换——轻量、流畅、兼容性好，也最容易维护。
用 class 切换 + CSS transition（首选）
把动画逻辑交给 CSS，JS 只管“要不要显示”，分工清晰、性能高：
- 在 CSS 中定义两个类：
.fade-in（opacity: 1; visibility: visible;）和.fade-out（opacity: 0; visibility: hidden;），都加上transition: opacity 0.3s ease, visibility 0.3s; - 确保元素初始带
class="fade-out"，避免首次加载闪现 - JS 中统一用
element.classList.toggle('fade-in', shouldShow)控制显隐，自动处理增删逻辑，不担心竞态 -
注意：必须配
visibility（不能用display），否则过渡会失效；visibility虽不支持缓动，但设时长可与opacity同步收放
用 element.animate() 做精细控制
适合需要暂停、反转、动态调速或链式执行的场景，但需手动补全显示/隐藏逻辑：
- 淡入示例：
el.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 300 }) - 动画结束后务必设置终态：
el.style.opacity = '1'; el.style.visibility = 'visible';，否则一停就回退 - 要淡出并移除？监听
animationend事件再调el.remove()或el.style.display = 'none' - 注意兼容性：iOS 13.4+、macOS 10.15.4+ 才稳定支持，旧版 Safari 需降级到 CSS transition 方案
避免纯 JS 定时器方案（除非必要）
用 setInterval 或 setTimeout 手动改 opacity 虽然可控，但有明显短板：
- 主线程阻塞风险高，页面卡顿时动画易掉帧
- 需手动清理定时器，漏掉会导致内存泄漏
- 无法利用 GPU 加速，动画不如 CSS 流畅
- 若用
requestAnimationFrame替代，体验可提升，但仍绕开了浏览器原生优化机制
关键细节别忽略
无论选哪种方式，这几个点直接影响效果是否自然：
- 淡入前确保
display不为none，否则元素不可见也无法过渡 - 淡出后若要禁用交互，给
opacity: 0的元素加pointer-events: none，防止鼠标穿透 - 如果元素隐藏后不该占位，用
visibility: hidden（保留盒模型）或配合height: 0; overflow: hidden;（彻底收缩） - 过渡时长建议 200–400ms，太短生硬，太长拖沓
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
