js实现渐隐渐现

使用CSS transition和opacity实现渐隐渐现

通过CSS的transition属性和opacity属性结合JavaScript控制元素的透明度变化，实现平滑的渐隐渐现效果。

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

<script>
  const element = document.querySelector('.fade-element');

  // 渐隐
  function fadeOut() {
    element.classList.add('hidden');
  }

  // 渐现
  function fadeIn() {
    element.classList.remove('hidden');
  }
</script>

使用纯JavaScript实现渐隐渐现

通过JavaScript直接操作元素的opacity属性，结合requestAnimationFrame实现更精细的控制。

function fade(element, duration, targetOpacity) {
  const startOpacity = parseFloat(getComputedStyle(element).opacity);
  const deltaOpacity = targetOpacity - startOpacity;
  const startTime = performance.now();

  function animate(currentTime) {
    const elapsedTime = currentTime - startTime;
    const progress = Math.min(elapsedTime / duration, 1);
    element.style.opacity = startOpacity + deltaOpacity * progress;

    if (progress < 1) {
      requestAnimationFrame(animate);
    }
  }

  requestAnimationFrame(animate);
}

// 渐隐
fade(element, 500, 0);

// 渐现
fade(element, 500, 1);

使用jQuery实现渐隐渐现

如果项目中已引入jQuery库，可以使用其内置的fade方法快速实现效果。

// 渐隐
$('#element').fadeOut(500);

// 渐现
$('#element').fadeIn(500);

// 切换显示状态
$('#element').fadeToggle(500);

使用CSS动画实现渐隐渐现

定义CSS关键帧动画，通过JavaScript添加/移除类名触发动画效果。

<style>
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
  }

  .fade-in {
    animation: fadeIn 0.5s forwards;
  }

  .fade-out {
    animation: fadeOut 0.5s forwards;
  }
</style>

<script>
  const element = document.getElementById('element');

  // 渐现
  element.classList.add('fade-in');
  element.classList.remove('fade-out');

  // 渐隐
  element.classList.add('fade-out');
  element.classList.remove('fade-in');
</script>

使用Web Animations API实现

现代浏览器支持的Web Animations API提供了更强大的动画控制能力。

const element = document.getElementById('element');

// 渐现
element.animate(
  [{ opacity: 0 }, { opacity: 1 }],
  { duration: 500, fill: 'forwards' }
);

// 渐隐
element.animate(
  [{ opacity: 1 }, { opacity: 0 }],
  { duration: 500, fill: 'forwards' }
);