如何在不使用jQuery的情况下在javascript中为页面提供淡出效果

function fadeOut(element, duration) {
  var opacity = 1;
  var interval = 50; // 每隔50毫秒改变一次opacity值
  var steps = duration / interval; // 总步数
  var currentStep = 0; // 当前步数

  var fadeOutInterval = setInterval(function() {
    opacity -= 1 / steps; // 每次减小的步长
    element.style.opacity = opacity;

    currentStep++;

    if (currentStep >= steps) {
      clearInterval(fadeOutInterval);
      element.style.display = 'none'; // 淡出完成后隐藏元素
    }
  }, interval);
}

var element = document.getElementById('targetElement'); // 替换为要应用淡出效果的元素的ID
var duration = 1000; // 淡出效果持续时间，单位为毫秒

fadeOut(element, duration);