推荐使用 CSS transition + class 切换实现淡入淡出：定义.fade-element含opacity过渡，.hidden设opacity:0和pointer-events:none；JS通过classList.add/remove控制，配合transitionend事件清理DOM。
用 JavaScript 实现元素的淡入淡出（fadeIn / fadeOut），核心是通过修改元素的 opacity 样式属性，并配合 transition 或定时器控制渐变过程。原生 DOM 操作不自带 fadeIn/fadeOut 方法，但可以轻松封装。
用 CSS transition + class 切换（推荐）
最简洁、性能好、易维护的方式：借助 CSS 过渡，JS 只负责切换类名。
先写 CSS：
.fade-element {
opacity: 1;
transition: opacity 0.3s ease-in-out;
}
.fade-element.hidden {
opacity: 0;
pointer-events: none; /* 防止隐藏时仍可交互 */
}JS 控制显示/隐藏：
立即学习“Java免费学习笔记（深入）”；
-
淡入（显示）：
el.classList.remove('hidden') -
淡出（隐藏）：
el.classList.add('hidden') - 如需在淡出完成后真正移除元素，监听
transitionend事件：
el.addEventListener('transitionend', function handler(e) {
if (e.propertyName === 'opacity' && el.classList.contains('hidden')) {
el.style.display = 'none'; // 或 el.remove()
el.removeEventListener('transitionend', handler);
}
});用 setInterval 手动控制 opacity（兼容老浏览器）
适合需要精确控制或不支持 CSS transition 的场景（如 IE9-）。原理是分步修改 style.opacity，从 0→1（fadeIn）或 1→0（fadeOut）。
- opacity 值范围是 0–1，需转为字符串（如
"0.3"）赋给element.style.opacity - 建议步长 0.05～0.1，间隔 20–50ms，避免过快或卡顿
- 淡出后记得设
display: 'none'，否则元素仍占布局空间
示例 fadeOut 函数：
function fadeOut(el, duration = 300) {
let opacity = 1;
const step = 0.05;
const interval = 20;
const totalSteps = Math.ceil(duration / interval);
<p>const timer = setInterval(() => {
opacity -= step;
el.style.opacity = opacity.toFixed(2);
if (opacity <= 0) {
el.style.opacity = '0';
el.style.display = 'none';
clearInterval(timer);
}
}, interval);
}用 requestAnimationFrame 实现更平滑动画
比 setInterval 更高效，与屏幕刷新率同步，动画更流畅。
- 记录开始时间，用当前时间计算已过去比例（t ∈ [0, 1]）
- 用缓动函数（如 easeInOutQuad）让淡入淡出更自然
- 动画结束时清理状态
简化版 fadeIn 示例：
function fadeIn(el, duration = 300) {
el.style.opacity = '0';
el.style.display = 'block';
<p>const start = performance.now();
function animate(now) {
const elapsed = now - start;
const progress = Math.min(elapsed / duration, 1);
// 简单线性：opacity = progress；加缓动可用 progress <em> progress </em> (3 - 2 * progress)
el.style.opacity = progress.toFixed(2);
if (progress < 1) requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
}注意事项和技巧
- 初始状态要设
opacity: 0且display: none（或 block），避免闪现 - 淡出中用户再次触发淡入，应先清除前一个动画（clearInterval / cancelAnimationFrame）
- 对 display 属性的修改（如从 none → block）必须在 opacity 动画前完成，否则 transition 不生效
- 移动端注意添加
will-change: opacity提升渲染性能（慎用，仅必要时）
不复杂但容易忽略细节，选对方法能让效果既自然又稳定。
