js怎么实现元素淡入淡出 js淡入淡出动画的4种实现技巧

function fadeIn(element, duration) {
  element.style.opacity = 0;
  element.style.display = 'block'; // 确保元素可见
  let opacity = 0;
  let intervalId = setInterval(function() {
    opacity += 0.01; // 每次增加的透明度，数值越小越平滑
    element.style.opacity = opacity;
    if (opacity >= 1) {
      clearInterval(intervalId);
    }
  }, duration / 100); // 根据duration计算间隔时间
}

// 示例：
const myElement = document.getElementById('myElement');
fadeIn(myElement, 500); // 500毫秒淡入

function fadeOut(element, duration) {
  element.style.opacity = 1;
  let opacity = 1;
  let intervalId = setInterval(function() {
    opacity -= 0.01;
    element.style.opacity = opacity;
    if (opacity <= 0) {
      clearInterval(intervalId);
      element.style.display = 'none'; // 淡出后隐藏元素
    }
  }, duration / 100);
}

// 示例：
const myElement = document.getElementById('myElement');
fadeOut(myElement, 500); // 500毫秒淡出

function fadeInRAF(element, duration) {
  element.style.opacity = 0;
  element.style.display = 'block';
  let startTime = null;

  function animate(currentTime) {
    if (!startTime) startTime = currentTime;
    const progress = currentTime - startTime;
    const opacity = Math.min(progress / duration, 1); // 确保opacity不超过1
    element.style.opacity = opacity;

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

  requestAnimationFrame(animate);
}

// 示例：
const myElement = document.getElementById('myElement');
fadeInRAF(myElement, 500);

function fadeOutRAF(element, duration) {
  element.style.opacity = 1;
  let startTime = null;

  function animate(currentTime) {
    if (!startTime) startTime = currentTime;
    const progress = currentTime - startTime;
    const opacity = Math.max(1 - progress / duration, 0); // 确保opacity不低于0
    element.style.opacity = opacity;

    if (progress < duration) {
      requestAnimationFrame(animate);
    } else {
      element.style.display = 'none';
    }
  }

  requestAnimationFrame(animate);
}

// 示例：
const myElement = document.getElementById('myElement');
fadeOutRAF(myElement, 500);