js实现渐隐

使用 CSS 过渡实现渐隐

通过 CSS 的 transition 和 opacity 属性实现渐隐效果，JavaScript 仅用于触发状态变化。

.fade-element {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}
.fade-out {
  opacity: 0;
}

const element = document.querySelector('.fade-element');
element.classList.add('fade-out');

使用 requestAnimationFrame 手动控制渐隐

通过 JavaScript 逐帧修改透明度实现更精细的控制。

function fadeOut(element, duration) {
  let opacity = 1;
  const startTime = performance.now();

  function animate(currentTime) {
    const elapsed = currentTime - startTime;
    opacity = 1 - (elapsed / duration);
    opacity = Math.max(0, opacity);
    element.style.opacity = opacity;

    if (opacity > 0) {
      requestAnimationFrame(animate);
    }
  }

  requestAnimationFrame(animate);
}

fadeOut(document.getElementById('target'), 1000); // 1秒渐隐

使用 Web Animations API 实现渐隐

现代浏览器支持的动画 API，性能更好。

const element = document.getElementById('target');
element.animate(
  [
    { opacity: 1 },
    { opacity: 0 }
  ],
  {
    duration: 1000,
    easing: 'ease-in-out',
    fill: 'forwards'
  }
);

结合 Promise 的渐隐方法

返回 Promise 以便在动画完成后执行回调。

function fadeOut(element, duration) {
  return new Promise((resolve) => {
    element.style.transition = `opacity ${duration}ms`;
    element.style.opacity = 0;

    setTimeout(() => {
      resolve();
    }, duration);
  });
}

fadeOut(document.querySelector('.box'), 500)
  .then(() => console.log('渐隐完成'));

注意事项

• 渐隐结束后如需隐藏元素，应添加 visibility: hidden 或 display: none
• 考虑浏览器兼容性，Web Animations API 需要 polyfill 支持旧浏览器
• 移动端设备上注意动画性能优化
• 复杂场景建议使用 GSAP 等专业动画库