js实现淡入效果

使用CSS和JavaScript实现淡入效果

通过结合CSS的opacity属性和JavaScript的定时器或动画API，可以实现元素的淡入效果。

CSS部分 定义初始透明度和过渡效果：

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

JavaScript部分 通过添加类名触发动画：

const element = document.getElementById('target');
element.classList.add('fade-in');
// 强制重绘以触发过渡
void element.offsetWidth; 
element.style.opacity = 1;

使用纯JavaScript实现淡入

通过requestAnimationFrame逐帧修改透明度：

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) {
      requestAnimationFrame(step);
    }
  }
  requestAnimationFrame(step);
}

fadeIn(document.getElementById('target'), 1000);

使用Web Animations API

现代浏览器支持的更高效动画方案：

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

jQuery实现方案

如果项目使用jQuery库：

$('#target').hide().fadeIn(1000);

每种方法适用于不同场景，CSS过渡方案性能最佳，纯JavaScript方案兼容性更好，Web Animations API适合复杂动画，jQuery方案适合已有jQuery的项目。