介绍
页面过渡效果为应用程序的用户体验提供了视觉美感。JavaScript 可以检测文档对象模型何时加载，并用于添加或删除应用 CSS 过渡以创建“淡入”效果的类。
在本文中，您将了解如何使用 JavaScript 和 CSS 淡入您的页面。
先决条件
要完成本教程，您将需要以下内容：
classList建议了解对象，但不是必需的。要了解有关该classList对象的更多信息，请查看我们的如何在 JavaScript 中修改 CSS 类教程。
步骤 1 — 使用 CSSopacity和transition
首先，您需要为页面何时打开和页面淡入创建 CSS 规则。此效果将依赖于opacity和transition属性。通过添加和删除元素fade上的类body，您可以使不透明度从 转换0为1：
<head>
<style>
body {
opacity: 1;
transition-duration: 0.7s;
transition-property: opacity;
}
body.fade {
opacity: 0;
}
</style>
</head>
您将编写的淡入代码将快速将fade类应用于body元素并将其设置为没有不透明度 ( 0)。加载页面后，您将从元素中删除fade该类，body并1在0.7几秒钟内将其设置为完全不透明度 ( ) 。
第 2 步 – 应用淡入类
在您的页面中，就在开始body标记之后，将fade类分配给body元素：
<body>
<script>
document.body.className = 'fade';
</script>
<!-- ... -->
</body>
或者，如果您的body元素包含现有类，您可以fade使用对象.add()上的方法应用该类classList。
在您的index.html文件中，将.add()方法附加到classList对象，并将fade类作为参数插入：
<body>
<script>
document.body.classList.add('fade');
</script>
<!-- ... -->
</body>
这会将fade类添加到您现有的类中。
第 3 步 – 删除淡入类
要从您的类中移除淡入过渡，您可以在文档对象模型加载时实现一个事件侦听器。您可能还希望实现延迟以确保过渡效果对读者可见。
在您的index.html文件中，使用事件侦听器并将body元素上的类名分配为空字符串的值：
<body>
<!-- ... -->
<script>
document.addEventListener("DOMContentLoaded", () => {
window.setTimeout(function() {
document.body.className = '';
}, 230);
});
</script>
</body>
空字符串告诉 JavaScript 在页面加载后恢复类名。
或者，如果您的body元素包含现有类，请.remove()在classList对象上使用该方法：
<body>
<!-- ... -->
<script>
document.addEventListener("DOMContentLoaded", () => {
window.setTimeout(function() {
document.body.classList.remove('fade');
}, 230);
});
</script>
</body>
该.remove()方法将删除fade该类。
现在，当您加载页面时，它最初会fade向body元素添加一个类。一个CSS转换将开始改变不透明度0到1过的课程0.7秒。一旦页面完成加载，fade该类将从body元素中删除。
结论
在本文中，您使用 JavaScript 和 CSS 的组合来创建页面加载时的“淡入”效果。您使用opacity和transition来创建效果。然后您使用 DOM 操作来添加和删除触发转换的类。
