使用 JavaScript 实现 display 显示隐藏动画效果，无需 setTimeout 或事件监听器

2024-02-20 11:18:00

JavaScript 作为一门强大的编程语言，不仅可以操作 DOM（文档对象模型），还可以动态地操纵 CSS 属性，从而实现各种动画效果。在本文中，我们将着眼于如何使用 JavaScript 控制 display 属性，实现平滑的显示/隐藏动画效果。

传统的做法是使用 setTimeout 函数，在指定的时间延迟后触发 CSS 过渡效果。然而，这种方法存在一些局限性，例如需要准确计算延迟时间以确保动画流畅，以及可能会因浏览器和设备差异导致不一致的效果。

为了解决这些问题，我们将采用一种更直接的方法，通过直接修改 CSS display 属性来触发动画效果。具体步骤如下：

获取元素的引用： 使用 document.querySelector() 或 document.getElementById() 等方法获取要控制显示/隐藏的元素的引用。
设置初始 display 值： 将元素的 display 属性设置为 "none"，使其最初处于隐藏状态。
创建动画函数： 创建一个 JavaScript 函数，该函数将负责显示或隐藏元素。在这个函数中，我们可以使用 CSS display 属性来控制元素的可见性。
切换 display 属性： 在动画函数中，我们可以使用 if/else 语句来切换 display 属性的值，从而实现显示或隐藏的效果。例如，如果元素当前处于隐藏状态，我们可以将其 display 属性设置为 "block" 以显示它。
调用动画函数： 最后，我们可以调用动画函数来触发显示/隐藏动画效果。这可以通过用户交互（例如单击事件）或代码中的特定条件来触发。

这种方法具有以下优点：

简单高效： 不需要复杂的定时器或事件监听器，从而简化了代码并提高了效率。
一致性： 与基于 setTimeout 的方法相比，这种方法在不同浏览器和设备上提供了更一致的效果。
灵活性： 我们可以根据需要轻松定制动画，例如调整过渡持续时间或添加缓动效果。

下面是一个示例代码，展示了如何使用 JavaScript 实现 display 显示/隐藏动画效果：

const element = document.getElementById("my-element");

function toggleDisplay() {
  if (element.style.display === "none") {
    element.style.display = "block";
  } else {
    element.style.display = "none";
  }
}

element.addEventListener("click", toggleDisplay);