js实现fadein

使用 CSS 动画实现淡入效果

通过 CSS 的 opacity 和 transition 属性实现淡入效果，JavaScript 仅用于触发类名切换。

<style>
  .fade-in {
    opacity: 0;
    transition: opacity 0.5s ease-in;
  }
  .fade-in.active {
    opacity: 1;
  }
</style>

<script>
  const element = document.querySelector('.fade-in');
  element.classList.add('active');
</script>

使用纯 JavaScript 实现淡入

通过 requestAnimationFrame 逐帧修改 opacity，实现更灵活的动画控制。

function fadeIn(element, duration = 500) {
  let opacity = 0;
  const step = 16 / duration; // 每帧增量（基于60FPS）
  element.style.opacity = opacity;
  element.style.display = 'block'; // 确保元素可见

  const animate = () => {
    opacity += step;
    if (opacity >= 1) {
      element.style.opacity = 1;
      return;
    }
    element.style.opacity = opacity;
    requestAnimationFrame(animate);
  };
  animate();
}

// 调用示例
fadeIn(document.getElementById('target'));

使用 jQuery 实现淡入

若项目已引入 jQuery，可直接使用内置的 fadeIn() 方法。

$('#target').fadeIn(500); // 500ms 淡入时长

结合 CSS 关键帧动画

通过 @keyframes 定义动画，JavaScript 动态添加动画类。

<style>
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .animate-fadein {
    animation: fadeIn 0.5s forwards;
  }
</style>

<script>
  document.getElementById('target').classList.add('animate-fadein');
</script>

注意事项

• 性能优化：优先使用 CSS 动画（如 transition 或 @keyframes），其性能通常优于 JavaScript 逐帧动画。
• 兼容性：requestAnimationFrame 不适用于 IE9 及以下版本，需使用 setTimeout 替代。
• 初始状态：确保元素初始 opacity 为 0，且 display 不为 none（否则动画无效）。