js实现渐隐

实现渐隐效果的JavaScript方法

使用CSS过渡（transition）结合JavaScript 通过修改元素的透明度（opacity）属性实现渐隐效果，CSS处理过渡动画更流畅。

const element = document.getElementById('targetElement');
element.style.transition = 'opacity 1s ease-in-out';
element.style.opacity = '0';

使用requestAnimationFrame手动控制 适合需要精确控制动画过程的场景，逐帧修改透明度值。

function fadeOut(element, duration) {
  let opacity = 1;
  const interval = 16; // 约60fps
  const delta = interval / duration;

  function step() {
    opacity -= delta;
    if (opacity <= 0) {
      element.style.opacity = '0';
      return;
    }
    element.style.opacity = opacity;
    requestAnimationFrame(step);
  }
  requestAnimationFrame(step);
}

使用classList切换CSS类 定义好CSS动画类后，通过JavaScript动态添加类名。

.fade-out {
  opacity: 0;
  transition: opacity 0.5s;
}

document.getElementById('targetElement').classList.add('fade-out');

使用Web Animations API 现代浏览器支持的动画API，性能较好。

document.getElementById('targetElement').animate(
  [{ opacity: 1 }, { opacity: 0 }],
  { duration: 1000, fill: 'forwards' }
);

注意事项

• 考虑添加visibility: hidden或display: none在动画结束后彻底隐藏元素
• 移动端注意硬件加速，可添加transform: translateZ(0)
• 过渡时间单位建议用秒（s）而非毫秒（ms）
• 需要兼容旧浏览器时应添加前缀-webkit-transition

扩展实现

如需在动画结束后执行回调：

element.addEventListener('transitionend', () => {
  console.log('渐隐动画完成');
});