当前位置：首页 > JavaScript

js实现淡入

2026-04-06 00:32:00JavaScript

使用CSS过渡实现淡入效果

通过添加CSS过渡属性结合JavaScript控制类名的切换，实现平滑的淡入效果。

HTML结构：

<div id="fadeElement" class="hidden">内容区域</div>

CSS样式：

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

.visible {
  opacity: 1;
}

JavaScript控制：

const element = document.getElementById('fadeElement');
element.classList.remove('hidden');
element.classList.add('visible');

使用requestAnimationFrame手动控制

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

function fadeIn(element, duration = 1000) {
  let start = null;
  element.style.opacity = 0;
  element.style.display = 'block';

  function step(timestamp) {
    if (!start) start = timestamp;
    const progress = timestamp - start;
    const opacity = Math.min(progress / duration, 1);
    element.style.opacity = opacity;

    if (progress < duration) {
      window.requestAnimationFrame(step);
    }
  }

  window.requestAnimationFrame(step);
}

使用Web Animations API

现代浏览器支持的Web Animations API提供更高效的动画控制：

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

jQuery实现方案

使用jQuery库的fadeIn方法快速实现：

$('#fadeElement').fadeIn(1000);

淡入完成后执行回调

为动画添加完成回调函数：

function fadeInWithCallback(element, duration, callback) {
  element.style.transition = `opacity ${duration}ms`;
  element.style.opacity = 0;
  element.style.display = 'block';

  setTimeout(() => {
    element.style.opacity = 1;
  }, 10);

  element.addEventListener('transitionend', () => {
    if (callback) callback();
  }, { once: true });
}

注意事项：

js实现淡入