如何使用纯 JavaScript 添加淡入效果?
简介
我们使用淡入效果通过逐渐增加或减少网站的某些部分的不透明度来吸引人们的注意力。这种逐渐改变的不透明度称为淡入或淡出效果。当我们逐渐增加不透明度时，它被称为淡入效果，用于使页面的选定部分在选定的时间内变得更加清晰可见。这样可以实现平滑的过渡，并有助于使我们的网站更具活力，更吸引用户。
在本文中，我们将探讨使用 HTML、CSS 和纯 JavaScript 实现淡入淡出效果的几种方法。
方法
使用纯 JavaScript 实现淡入淡出效果的两种主要方法是 -
使用 clearInterval() 方法
使用 requestAnimationFrame() 函数
让我们详细了解每种方法。
方法 1:使用 clearInterval() 方法
clearInterval() 方法通过终止执行使用 setInterval() 以特定间隔增加不透明度的函数来停止淡入淡出动画。
语法
clearInterval(intervalID);
让我们看一个分步示例，使用 clearInterval() 方法通过纯 JavaScript 实现淡入淡出动画。
示例
步骤 1 - 如果要应用淡入淡出动画，您将需要一个 HTML 元素。
<div id="elementId">淡入元素</div>
步骤 2 - 接下来，在 CSS 中，将元素的初始不透明度设置为 0，这样它一开始就是不可见的。让我们在此基础上添加一些 CSS 来使我们的元素更好 -
#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 定义元素的视觉属性，JavaScript 代码(位于脚本标记中)使用 setInterval 和 clearInterval 方法使元素逐渐增加其不透明度，直到达到最大值。
当您在 Web 浏览器中打开此 HTML 文件时，它应该以灰色背景色淡入元素，文本"Tutorials Point"居中，颜色为黑色。
方法 2:使用 requestAnimationFrame() 函数
requestAnimationFrame() 函数允许浏览器在下一次重新绘制之前调用指定的函数来更新 JavaScript 中的淡入动画，从而实现高效的动画性能。
语法
requestAnimationFrame(fade);
让我们看一个分步示例，使用 requestAnimationFrame() 方法通过纯 JavaScript 实现淡入动画。
示例
步骤 1 − 如果要应用淡入动画，您将需要一个 HTML 元素 −
<div id="elementId">淡入元素</div>
步骤 2 − 接下来，在 CSS 中，将元素的初始不透明度设置为 0，这样它一开始就是不可见的。让我们在此基础上添加一些 CSS，使我们的元素更好 −
#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>
您将在单个文件 index.html 中找到 HTML、CSS 和 JavaScript 代码。在这里，HTML 标识具有淡入效果的元素，CSS 设置其视觉属性，脚本标记中的 JavaScript 使用 requestAnimationFrame 和递归来增加元素的不透明度，直到达到最大值。
当您在浏览器中打开此 HTML 文件时，它将显示具有灰色背景的元素的淡入动画，文本"Tutorials Point"位于中心并以黑色显示。
结论
在本文中，我们了解了如何使用纯 JavaScript 实现淡入效果。淡入效果是一种逐渐增加网页选定部分不透明度的方法，使其对用户更可见。实现此效果的两种主要方法是使用 clearInterval() 方法和 requestAnimationFrame() 函数。
我们详细介绍了每种方法，并提供了如何使用它们的分步示例。这两种方法都需要使用 HTML、CSS 和 JavaScript，并且可以根据您网站的特定需求进行自定义。有了这些知识，您现在可以为您的网站添加淡入效果，使其更具活力，更吸引用户。
