如何用纯JavaScript添加淡出效果

我们可以通过操作元素的样式属性，使用纯 JavaScript 添加淡出效果。我们可以先将元素的不透明度设置为1，然后使用setInterval或setTimeout函数随着时间推移逐渐降低。最后，一旦不透明度达到0，我们可以从DOM中移除该元素。

淡出效果

淡出效果是一种视觉过渡，其中一个元素在一段时间内逐渐变得不可见。这种效果通常用于网页设计和动画，在页面上的元素之间创造一个平滑的过渡，或者从视图中隐藏一个元素。

因此，让我们讨论一下我们今天要使用的方法。

方法

为淡出效果创建一个函数。Inside the function, create a variable to store the element you want to apply the effect to −

function fadeOut(element) {
  var el = document.getElementById(element);
}

为淡出函数添加一个setInterval函数。这将允许效果持续运行，直到元素不再可见。

function fadeOut(element) {
   var el = document.getElementById(element);
   setInterval(function() {
      // code for the fade-out effect
   }, 50);
}

在setInterval函数中，创建一个变量来存储元素的当前不透明度。然后，使用if语句检查不透明度是否大于0。如果是，将不透明度递减0.1，并将新值应用于元素的style.opacity属性。

function fadeOut(element) {
   var el = document.getElementById(element);
   setInterval(function() {
      var opacity = el.style.opacity;
      if (opacity > 0) {
         opacity -= 0.1;
         el.style.opacity = opacity;
      }
   }, 50);
}

最后，调用fadeOut函数，并传入你想应用效果的元素的ID：

fadeOut("myElement");

注意 – 这是一个基本的例子，说明如何使用纯JavaScript创建一个淡出效果。你可以调整不透明度、递减值、间隔时间，并添加额外的逻辑，使效果更加动态。

例子

因此，现在让我们来看看完整的工作代码以及它是如何工作的。

<!DOCTYPE html>
<html>
<head>
   <title>Fade Out</title>
</head>
   <body>
      <div style="color:black;" class="fade-out-element">
         This is the element that will fade out
      </div>
      <script>
         var element = document.querySelector('.fade-out-element'); 
         function fadeOut(el) {
            var opacity = 1; // Initial opacity
            var interval = setInterval(function() {
               if (opacity > 0) {
                  opacity -= 0.1;
                  el.style.opacity = opacity;
               } else {
                  clearInterval(interval); // Stop the interval when opacity reaches 0
                  el.style.display = 'none'; // Hide the element
               }
            }, 50);
         }
         fadeOut(element);
      </script>
   </body>
</html>