JavaScript 控制元素透明度切换需操作 opacity 属性（0–1），用 element.style.opacity = "0.2" 设置字符串值；可用 setInterval 实现渐变，按步长增减并清除定时器，注意方向判断与浮点误差处理。
用 JavaScript 控制元素透明度切换，核心是操作 CSS 的 opacity 属性（取值范围 0–1），配合定时器或过渡动画实现平滑变化。
直接修改 opacity 样式
最基础的方式是通过 element.style.opacity 设置数值。注意：opacity 是字符串值，需确保传入合法数字（如 "0.3" 或 "1"），且要处理初始状态缺失的情况。
- 先检查元素是否已有 opacity 值，没有就设为默认（如 "1"）
- 赋值时统一加引号，例如
el.style.opacity = "0.2" - 不要写成
el.style.opacity = 0.2（部分旧浏览器兼容性差）
用 setInterval 实现渐变切换
手动控制透明度逐帧变化，适合需要精确节奏或兼容老环境的场景。
- 定义起始值、目标值、步长（如每次 ±0.05）和间隔时间（如 30ms）
- 用
setInterval持续更新 opacity，到达目标后清除定时器 - 注意方向判断：当前值小于目标值则递增，否则递减
- 避免浮点误差，可用
Math.abs(current - target) 作为结束条件
借助 CSS transition 实现平滑过渡
更推荐的方式：JS 只负责触发类名切换，把动画交给 CSS 处理，性能更好、代码更简洁。
立即学习“Java免费学习笔记（深入）”；
- 在 CSS 中定义：
.fade { opacity: 0; transition: opacity 0.3s ease; } - JS 中只需
element.classList.toggle("fade")或add/remove - 若需动态控制时长或缓动函数，可同时设置内联 transition：
el.style.transition = "opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)"
处理 display 与 opacity 的协同
opacity 为 0 时元素仍占布局空间。如需彻底隐藏，常配合 display 或 visibility。
- 用
visibility: hidden保留占位但不可见，适合快速切换 - 用
display: none完全移出布局，但需注意：opacity 动画无法在 display 切换瞬间生效，建议先设 opacity → 0，过渡完成后再设 display → none - 可通过监听
transitionend事件捕获动画结束时机
