面试题：JavaScript 如何使用 CSS 类实现动态视觉效果

Question

假设你有一个 HTML 元素，其 `id` 为 `targetElement`，请用 JavaScript 代码通过添加和移除 CSS 类来实现元素的淡入和淡出效果，阐述主要步骤并写出关键代码。

Answer 1

1. 主要步骤：
   • 定义淡入和淡出的 CSS 类，例如淡入类添加透明度从 0 到 1 的过渡效果，淡出类添加透明度从 1 到 0 的过渡效果。
   • 使用 document.getElementById 获取目标元素。
   • 编写淡入和淡出的函数，在函数中通过 classList.add 和 classList.remove 来添加和移除相应的 CSS 类。
2. 关键代码：
   • HTML 部分：

   <div id="targetElement">这是要淡入淡出的元素</div>
   

   • CSS 部分：

.fade - in { opacity: 1; transition: opacity 0.5s ease - in; } .fade - out { opacity: 0; transition: opacity 0.5s ease - out; }

- JavaScript 部分：
```javascript
const targetElement = document.getElementById('targetElement');
function fadeIn() {
    targetElement.classList.add('fade - in');
    targetElement.classList.remove('fade - out');
}
function fadeOut() {
    targetElement.classList.add('fade - out');
    targetElement.classList.remove('fade - in');
}