数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用纯 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，以便它最初不可见。让我们也添加一些其他 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 定义了元素的可视属性，而位于 script 标签中的 JavaScript 代码使用 setInterval 和 clearInterval 方法使元素逐渐增加其不透明度，直到达到最大值。
当您在 Web 浏览器中打开此 HTML 文件时，它应该会淡入具有灰色背景颜色的元素，其中文本“Tutorials Point”居中且为黑色。
方法 2：使用 requestAnimationFrame() 函数
requestAnimationFrame() 函数允许浏览器在下次重绘之前调用指定函数来更新 JavaScript 中的淡入动画，从而实现高效的动画性能。
语法
requestAnimationFrame(fade);
让我们看一个分步示例，以使用 requestAnimationFrame() 方法使用纯 JavaScript 实现淡入动画。
示例
步骤 1 - 如果要应用淡入动画，则需要一个 HTML 元素：
<div id="elementId">Fade in element</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>
您会发现 HTML、CSS 和 JavaScript 代码都组合在一个名为 index.html 的文件中。在这里，HTML 标识了要应用淡入效果的元素，CSS 设置了其可视属性，script 标签中的 JavaScript 使用 requestAnimationFrame 和递归来增加元素的不透明度，直到达到最大值。
当您在浏览器中打开此 HTML 文件时，它将显示具有灰色背景的元素的淡入动画，文本“Tutorials Point”位于中心且为黑色。
结论
在本文中，我们了解了如何使用纯 JavaScript 实现淡入效果。淡入效果是一种逐渐增加网页选定部分的不透明度的方法，使其对用户更清晰可见。实现此效果的两种主要方法是使用 clearInterval() 方法和 requestAnimationFrame() 函数。
我们详细了解了每种方法，并提供了如何使用它们的逐步示例。这两种方法都需要使用 HTML、CSS 和 JavaScript，并且可以根据您网站的特定需求进行自定义。有了这些知识，您现在就可以向您的网站添加淡入效果，并使其对用户而言更具活力和吸引力。
6K+ 浏览量
