JavaScript DOM 操作怎么实现元素的淡入淡出显示隐藏-js教程-PHP中文网

推荐使用 css transition + class 切换实现淡入淡出：定义.fade-element含opacity过渡，.hidden设opacity:0和pointer-events:none；js通过classlist.add/remove控制，配合transitionend事件清理dom。

javascript 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 控制显示/隐藏：

淡入（显示）：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）。

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

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 </p>

用 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 </p>