当前位置：首页 > JavaScript

js实现淡出效果

2026-01-30 21:47:21JavaScript

使用CSS transition实现淡出效果

通过CSS的transition属性和opacity属性结合实现淡出动画效果。定义一个CSS类控制透明度变化，用JavaScript切换这个类。

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

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

// 动画结束后移除元素（可选）
element.addEventListener('transitionend', () => {
  element.style.display = 'none';
});

使用requestAnimationFrame手动控制

通过JavaScript手动控制透明度变化，实现更精细的动画控制。

js实现淡出效果

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

  function animate(currentTime) {
    const elapsed = currentTime - startTime;
    opacity = 1 - (elapsed / duration);

    if (opacity > 0) {
      element.style.opacity = opacity;
      requestAnimationFrame(animate);
    } else {
      element.style.opacity = 0;
      element.style.display = 'none';
    }
  }

  requestAnimationFrame(animate);
}

// 使用示例
fadeOut(document.getElementById('target'), 1000); // 1秒淡出

使用Web Animations API

现代浏览器支持的Web Animations API提供了更高效的动画实现方式。

js实现淡出效果

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

// 动画结束后隐藏元素（可选）
element.getAnimations()[0].finished.then(() => {
  element.style.display = 'none';
});

使用jQuery实现淡出

如果项目中已使用jQuery库，可以简单地使用其内置的fadeOut方法。

$('#target').fadeOut(1000, function() {
  // 动画完成后的回调
});

淡出后执行回调函数

无论采用哪种实现方式，都可以在淡出动画完成后执行回调函数。

function fadeOutWithCallback(element, duration, callback) {
  element.style.transition = `opacity ${duration}ms ease-in-out`;
  element.style.opacity = 0;

  setTimeout(() => {
    element.style.display = 'none';
    if (callback) callback();
  }, duration);
}

以上方法可以根据项目需求和技术栈选择最适合的实现方式。CSS transition方案性能最佳且最简单，requestAnimationFrame提供最精细的控制，Web Animations API则是现代浏览器的推荐方案。