当前位置：首页 > JavaScript

js实现淡入效果

2026-03-15 17:03:49JavaScript

使用CSS transition实现淡入效果

通过CSS的transition属性结合opacity实现淡入效果，JavaScript仅用于触发样式变化。HTML元素初始状态设置为opacity: 0，通过添加类名触发过渡。

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

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

使用requestAnimationFrame手动控制透明度

通过JavaScript逐帧修改opacity值实现更精细的控制。适合需要自定义动画曲线或动态调整时长的场景。

js实现淡入效果

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

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

使用Web Animations API

现代浏览器支持的Web Animations API提供更高效的动画控制方式，性能优于传统JavaScript动画。

js实现淡入效果

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

结合Promise实现链式调用

将淡入效果封装为返回Promise的函数，便于在动画完成后执行后续操作。

function promiseFadeIn(element, duration) {
  return new Promise((resolve) => {
    element.style.transition = `opacity ${duration}ms ease-in`;
    element.style.opacity = 1;
    setTimeout(resolve, duration);
  });
}

promiseFadeIn(document.getElementById('banner'), 800)
  .then(() => console.log('Animation complete'));

淡入完成后自动移除样式

通过transitionend事件监听动画结束，自动清理临时添加的样式。

const box = document.querySelector('.box');
box.style.opacity = 0;
box.style.transition = 'opacity 1s';

setTimeout(() => {
  box.style.opacity = 1;
  box.addEventListener('transitionend', () => {
    box.style.transition = '';
  }, { once: true });
}, 100);