面试题：JavaScript 中如何使用 CSS 过渡效果实现元素淡入

HTML 代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>淡入效果</title>
</head>

<body>
    <div id="fade-in-element">淡入的元素</div>
    <script src="script.js"></script>
</body>

</html>

CSS 代码

#fade-in-element {
    opacity: 0;
    transition: opacity 2s ease;
}

JavaScript 代码

document.addEventListener("DOMContentLoaded", function () {
    const fadeInElement = document.getElementById('fade-in-element');
    // 等待100毫秒，确保过渡效果能正常触发
    setTimeout(() => {
        fadeInElement.style.opacity = 1;
    }, 100);
});

代码逻辑解释

HTML部分：
- 创建一个基本的HTML结构，包含一个具有唯一id fade-in-element 的 <div> 元素，这个元素就是我们要淡入显示的目标元素。
- 引入外部的CSS样式表 styles.css 和JavaScript脚本 script.js。
CSS部分：
- 为 #fade-in-element 设置初始透明度 opacity 为0，使其初始不可见。
- 使用 transition 属性指定透明度变化的过渡效果，持续时间为2秒，过渡效果的缓动函数为 ease。
JavaScript部分：
- 使用 document.addEventListener("DOMContentLoaded", function () {... }) 确保页面DOM加载完成后执行后续代码。
- 获取 id 为 fade-in-element 的元素。
- 使用 setTimeout 延迟100毫秒后，将元素的透明度设置为1，从而触发CSS中定义的过渡效果，使元素在2秒内淡入显示。延迟100毫秒是为了确保过渡效果能够正常触发，若不延迟，直接设置透明度，过渡效果可能不会生效。

星途面试题库

面试题：JavaScript 中如何使用 CSS 过渡效果实现元素淡入

知识考点

面试题答案

HTML 代码

CSS 代码

JavaScript 代码

代码逻辑解释