js实现淡入

js实现淡入淡出的方法

使用纯JavaScript实现淡入效果

通过修改元素的opacity属性，结合setInterval或requestAnimationFrame实现逐渐显示的效果：

function fadeIn(element, duration) {
  let opacity = 0;
  const interval = 10;
  const delta = interval / duration;

  const timer = setInterval(function() {
    opacity += delta;
    element.style.opacity = opacity;

    if (opacity >= 1) {
      clearInterval(timer);
    }
  }, interval);
}

使用CSS过渡配合JavaScript

更高效的实现方式是利用CSS过渡特性，只需通过JavaScript触发类名变化：

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

function fadeIn(element) {
  element.style.opacity = 0;
  element.classList.add('fade-in');
  element.style.opacity = 1;
}

requestAnimationFrame实现

高性能动画推荐使用这个API，能保证与浏览器刷新率同步：

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

  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);
}

带回调函数的版本

可以在动画完成后执行回调函数：

function fadeIn(element, duration, callback) {
  let opacity = 0;
  const interval = 10;
  const delta = interval / duration;

  const timer = setInterval(function() {
    opacity += delta;
    element.style.opacity = opacity;

    if (opacity >= 1) {
      clearInterval(timer);
      if (callback) callback();
    }
  }, interval);
}

注意事项

• 确保目标元素初始状态为opacity: 0和display: block（非none）
• 对于需要先隐藏再淡入的元素，应先设置display属性再开始淡入
• 考虑添加will-change: opacity优化性能
• 移动端注意硬件加速，可添加transform: translateZ(0)