如何使用纯JavaScript添加淡出效果？

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

淡出效果

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

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

方法

  • 创建一个用于淡出效果的函数。在函数内部，创建一个变量来存储要应用效果的元素：

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>

更新于：2023年2月6日

9K+ 次浏览

启动你的职业生涯

通过完成课程获得认证

开始学习
广告