如何使用纯JavaScript添加淡入效果

简介

我们使用渐变效果，通过逐渐增加或减少其不透明度，使人们注意到我们网站的某些部分。这种不透明度的逐渐变化被称为淡入或淡出效果。当我们逐渐增加不透明度时，它被称为淡入效果，用于使页面的选定部分在选定的时间内变得更加明显。这创造了一个平滑的过渡，并有助于使我们的网站更加动态和吸引用户。

在这篇文章中，我们将探讨一些使用HTML、CSS和纯JavaScript实现淡入效果的方法。

方法

我们可以用纯JavaScript实现淡入效果的两个主要方法是

使用clearInterval()方法
使用 requestAnimationFrame() 函数

让我们来详细了解一下这两种方法。

方法1：使用clearInterval()方法

clearInterval()方法通过终止一个函数的执行来停止渐变动画，该函数被设置为使用setInterval()在特定的时间间隔内增加不透明度。

语法

clearInterval(intervalID);

让我们看一个逐步的例子，使用clearInterval()方法来实现一个纯JavaScript的淡入动画。

例子

第1步 – 如果你想应用淡入动画，你将需要一个HTML元素。

<div id="elementId">Fade in element</div>

第2步– 接下来，在CSS中，将该元素的初始不透明度设置为0，这样一来，它一开始就看不见了。

#elementId {
   width: 100px;
   height: 100px;
   background-color: gray;
   margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
   color: black;
   opacity: 0;
}

第3步– 在你的JavaScript中，你将创建一个变量来存储当前的不透明度，然后使用setInterval()方法，每10毫秒增加少量的不透明度。

let element = document.getElementById("elementId");
let opacity = 0;
let fadeIn = setInterval(() => {
   element.style.opacity = opacity;
   opacity += 0.01;
}, 10);

第4步 – 然后你可以使用 if 语句来检查不透明度是否达到了1（最大值），在这一点上你要停止动画—-。

if (opacity >= 1) {
   clearInterval(fadeIn);
}

例子

第5步 – 最后，让我们把所有的东西放在一起 —

<!DOCTYPE html>
<html>
<head>
   <title>Fade in Animation</title>
   <style>
      #elementId {
         width: 100px;
         height: 100px;
         background-color: gray;
         margin: 0 auto;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 20px;
         color: black;
         opacity: 0;
      }
   </style>
</head>
<body>
   <div id="elementId">Tutorials Point</div>
   <script>
      let element = document.getElementById("elementId");
      let opacity = 0;
      let fadeIn = setInterval(() => {
         if (opacity >= 1) {
            clearInterval(fadeIn);
         }
         element.style.opacity = opacity;
         opacity += 0.01;
      }, 10);
   </script>
</body>
</html>

在这个例子中，我们把HTML、CSS和JavaScript代码都放在一个名为index.html的文件中。HTML定义了要淡入的元素，CSS定义了该元素的视觉属性，而位于script标签中的JavaScript代码使用setInterval和clearInterval方法，使该元素的不透明度逐渐增加，直到达到最大值。

当你在网络浏览器中打开这个HTML文件时，它应该淡化灰色背景颜色的元素，文字 “Tutorials Point “居中，颜色为黑色。

方法2：使用 requestAnimationFrame() 函数

requestAnimationFrame()函数允许浏览器在下次重绘之前调用一个指定的函数来更新JavaScript中的淡入动画，从而实现高效的动画性能。

语法

requestAnimationFrame(fade);

让我们看一个分步骤的例子，使用requestAnimationFrame()方法来实现一个纯JavaScript的淡入动画。

例子

第1步 – 如果你想应用淡入动画，你将需要一个HTML元素 —

<div id="elementId">Fade in element</div>

第2步– 接下来，在CSS中，将该元素的初始不透明度设置为0，这样一来，它一开始就看不见了。

#elementId {
   opacity: 0;
}

第3步– 接下来，在你的JavaScript中，你将创建一个变量来存储当前的不透明度，然后使用requestAnimationFrame()函数，在每次调用时将不透明度增加一小部分。

let element = document.getElementById("elementId");
let opacity = 0;
function fade() {
   opacity += 0.01;
   element.style.opacity = opacity;
   requestAnimationFrame(fade);
}
requestAnimationFrame(fade);

第4步– 然后你可以使用if语句来检查不透明度是否达到1（最大值），在这一点上，你将希望通过打破requestAnimationFrame调用的递归来停止动画。

if (opacity >= 1) {
   return;
}

例子

第5步 – 最后，让我们把所有东西放在一起 —

<!DOCTYPE html>
<html>
<head>
   <title>Fade in Animation</title>
   <style>
      #elementId {
         width: 100px;
         height: 100px;
         background-color: grey;
         margin: 0 auto;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 20px;
         color: black;
         opacity: 0;
      }
   </style>
</head>
<body>
   <div id="elementId">Tutorials Pointt</div>
   <script>
      let element = document.getElementById("elementId");
      let opacity = 0;
      function fade() {
         if (opacity >= 1) {
            return;
         }
         opacity += 0.01;
         element.style.opacity = opacity;
         requestAnimationFrame(fade);
      }
      requestAnimationFrame(fade);
   </script>
</body>
</html>

你会发现HTML、CSS和JavaScript代码都结合在一个文件index.html中。在这里，HTML确定了要有淡入效果的元素，CSS设置了它的视觉属性，脚本标签中的JavaScript使用requestAnimationFrame和递归来增加元素的不透明度，直到它达到最大值。

当你在浏览器中打开这个HTML文件时，它将显示一个灰色背景的元素的淡入动画，文本 “Tutorials Point “在中间，颜色为黑色。